# Create a record

Compose create a record using the surrounding collection's state.

Import: @slices.sh/collection/headless

Public parts: 9

## Installation

### 1. Install the service registry

services/index.ts, which `import "@/services"` loads. A provider setup writes the same file; skip this if your app has one.

```bash
npx shadcn@latest add "https://slices.sh/r/services.json"
```

### 2. Install the headless library

```bash
npm install @slices.sh/collection@^0.1.6
```

### 3. Install the service

Install the provider configuration via shadcn or the slices CLI. Skip this step if your app already has the service configured. Provider commands and provisioning: https://slices.sh/docs/services/collection.md

## Anatomy

### Composition

```text
Collection.Root
  Collection.Create.Form
    Collection.Create.Field
      Collection.Create.Label
      Collection.Create.Input
      Collection.Create.Select
      Collection.Create.Checkbox
    Collection.Create.Submit
    Collection.Create.Error
```

## Minimal composition

```tsx
"use client"

import "@/services"
import { Collection } from "@slices.sh/collection/headless"
import type { CollectionSchema } from "@slices.sh/collection/services/types"

export function Example({ schema }: { schema: CollectionSchema }) {
  return (
    <Collection.Root collection={schema.collection} schema={schema}>
      <Collection.Create.Form>
        <Collection.Create.Field>
          <Collection.Create.Label />
          <Collection.Create.Input />
        </Collection.Create.Field>
        <Collection.Create.Submit>Create record</Collection.Create.Submit>
        <Collection.Create.Error />
      </Collection.Create.Form>
    </Collection.Root>
  )
}

```

Supply a registered collection schema. Parts use its fields, permissions and provider capabilities.

## A create form on its own

```tsx
"use client"

import "@/services"
import { Collection } from "@slices.sh/collection/headless"
import type { CollectionSchema } from "@slices.sh/collection/services/types"

export function Example({ schema }: { schema: CollectionSchema }) {
  return (
    <Collection.Create.Root schema={schema}>
      <Collection.Create.Form>
        <Collection.Create.Field>
          <Collection.Create.Label />
          <Collection.Create.Input />
          <Collection.Create.Select />
        </Collection.Create.Field>
        <Collection.Create.Submit>Create record</Collection.Create.Submit>
        <Collection.Create.Error />
      </Collection.Create.Form>
    </Collection.Create.Root>
  )
}

```

Away from any list, Create.Root provides the schema the form draws its fields from and starts no query. Inside Collection.Root it is not needed.

## Complete API reference

### Collection.Create.Form

action · Element: form

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Import: @slices.sh/collection/headless

Collection.Create.Form must be inside <Collection.Root>.

```tsx
PartProps<"form", { pending: boolean }>
```

Alternate import: Create.Form from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/form.tsx

### Collection.Create.Field

content · Element: div

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Import: @slices.sh/collection/headless

Collection.Create.Field must be inside <Collection.Root>.

```tsx
FieldProps

type FieldProps = PartProps<"div", { field: SchemaField }>
```

Alternate import: Create.Field from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/field.tsx

### Collection.Create.Label

content · Element: label

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Import: @slices.sh/collection/headless

Collection.Create.Label must be inside <Collection.Create.Field>.

```tsx
PartProps<"label">
```

Alternate import: Create.Label from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/label.tsx

### Collection.Create.Input

input · Element: input

An input typed by field (text, number, date, url), a select for enum fields and a checkbox for boolean fields. Each renders nothing for a field of another type.

Import: @slices.sh/collection/headless

Collection.Create.Input must be inside <Collection.Create.Field>.

```tsx
PartProps<"input", { invalid: boolean }>
```

Alternate import: Create.Input from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/input.tsx

### Collection.Create.Select

input · Element: select

An input typed by field (text, number, date, url), a select for enum fields and a checkbox for boolean fields. Each renders nothing for a field of another type.

Import: @slices.sh/collection/headless

Collection.Create.Select must be inside <Collection.Create.Field>.

```tsx
PartProps<"select">
```

Alternate import: Create.Select from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/select.tsx

### Collection.Create.Checkbox

input · Element: input

An input typed by field (text, number, date, url), a select for enum fields and a checkbox for boolean fields. Each renders nothing for a field of another type.

Import: @slices.sh/collection/headless

Collection.Create.Checkbox must be inside <Collection.Create.Field>.

```tsx
PartProps<"input">
```

Alternate import: Create.Checkbox from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/checkbox.tsx

### Collection.Create.Submit

action · Element: button

The submit button with its pending state, and the error of the last create.

Import: @slices.sh/collection/headless

Collection.Create.Submit must be inside <Collection.Create.Form>.

```tsx
PartProps<"button", { pending: boolean }>
```

Alternate import: Create.Submit from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/submit.tsx

### Collection.Create.Error

content · Element: div

The submit button with its pending state, and the error of the last create.

Import: @slices.sh/collection/headless

Collection.Create.Error must be inside <Collection.Create.Form>.

```tsx
PartProps<"div", { message: string }>
```

Alternate import: Create.Error from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/error.tsx

### Collection.Create.Root

scope

The standalone root, the form, one field scope per schema field (in a lane, all but the lane's own), and the label of the field in scope.

Import: @slices.sh/collection/headless

```tsx
RootProps & { schema: CollectionSchema }
```

Alternate import: Create.Root from @slices.sh/collection/headless/create

Source: @slices.sh/collection/src/headless/create/root.tsx

### Collection.Root

scope

The root, and the parts that choose what is drawn under it: one of several views, the data a view needs, and one of two screens by width.

Import: @slices.sh/collection/headless

```tsx
CollectionRootProps

type CollectionRootProps = RootProps &
  CollectionViewOptions &
  CardSizeOptions &
  SavedViewOptions &
  GroupingOptions & {
    /**
     * Left out or `true`: required, and a missing service throws. `"optional"`: renders its
     * children with no rows, and every part inside renders nothing. `false`: off. A capability
     * name (`"live"`) requires the service and that capability.
     */
    enabled?: Enabled
    /** The collection config, `"default"` when left out. `collection` names one inside it. */
    config?: string
    groupSumFields?: readonly string[]
    cardSizing?: boolean
    lanes?: boolean
    collection: string
    schema: CollectionSchema
    density?: DensityValue
    onDensityChange?: (density: DensityValue) => void
    palette?: boolean
    pageSize?: number
    infinite?: boolean
    live?: boolean
    /** Whether the search, the sort and the filter travel in the address bar. */
    urlState?: boolean
    /** `false` when nothing on screen searches: no search applies, from the address or a saved view. */
    search?: boolean
    /** `false` when nothing on screen filters: no filter applies, from the address or a saved view. */
    filters?: boolean
  }
```

Source: @slices.sh/collection/src/headless/root.tsx