# Bound field components (Composed API)

All 15 Tanstack-bound Composed field components, registered in `src/hooks/use-tanstack-form.tsx` via `createFormHook({ fieldComponents })`. They are exposed on the render-prop `field` object inside `<form.AppField>` WITHOUT the `Tanstack` prefix (e.g. the registered `TanstackTextField` is `field.TextField`).

The form-usage pattern is identical for every component:

```tsx
<form.AppField name="fieldPath">
  {field => <field.<Name> {...props} />}
</form.AppField>
```

## Inventory

| Registered name (in `useTanstackUnityForm`) | Source component (`Tanstack*`)                          | Wraps (non-bound base)                                                     | Notes                                                                                                                                                                                                                            |
| ------------------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `field.TextField`                           | `TanstackTextField`                                     | `TextField` → `TanstackInput` / `TanstackTextArea`                         | `multiline` switches input/textarea. `type` (`text`/`password`/`email`/`tel`/`url`/`search`) only valid when `multiline !== true`.                                                                                               |
| `field.SelectField`                         | `TanstackSelectField`                                   | `SelectField` → `TanstackSelect`                                           | Single-select with `options: { value, label }[]`.                                                                                                                                                                                |
| `field.MultiSelectField`                    | `TanstackMultiSelectField`                              | `MultiSelectField` → `TanstackMultiSelect`                                 | Generic component; chips for selected items.                                                                                                                                                                                     |
| `field.NumberField`                         | `TanstackNumberField`                                   | `NumberField` → `TanstackNumberInput`                                      | Locale-aware number formatting.                                                                                                                                                                                                  |
| `field.CheckboxField`                       | `TanstackCheckboxField`                                 | `CheckboxField` → `TanstackCheckbox`                                       | Single checkbox + label + feedback.                                                                                                                                                                                              |
| `field.CheckboxGroupField`                  | `TanstackCheckGroupField`                               | `CheckGroupField` → `TanstackCheckboxGroup`                                | Multi-checkbox group; value is `string[]`. Note the registered key is `CheckboxGroupField` even though the implementation is named `TanstackCheckGroupField`.                                                                    |
| `field.RadioButtonGroupField`               | `TanstackRadioButtonGroupField`                         | `RadioButtonGroupField` → `TanstackRadioButtonGroup`                       | Single-select radio group.                                                                                                                                                                                                       |
| `field.SelectableButtonGroupField`          | `TanstackSelectableButtonGroupField`                    | `SelectableButtonGroupField` → `TanstackSelectableButtonGroup`             | Pill-style segmented control.                                                                                                                                                                                                    |
| `field.SelectableCardCheckboxGroupField`    | `TanstackSelectableCardCheckboxGroupField`              | `SelectableCardCheckboxGroupField` → `TanstackSelectableCardCheckboxGroup` | Multi-select card grid.                                                                                                                                                                                                          |
| `field.SelectableCardRadioGroupField`       | `TanstackSelectableCardRadioGroupField`                 | `SelectableCardRadioGroupField` → `TanstackSelectableCardRadioGroup`       | Single-select card grid.                                                                                                                                                                                                         |
| `field.DatePickerField`                     | `TanstackDatePickerField`                               | `DatePickerField` → `TanstackDatePicker`                                   | Single-date popover picker.                                                                                                                                                                                                      |
| `field.DateRangePickerField`                | `TanstackDateRangePickerField`                          | `DateRangePickerField` → `TanstackDateRangePicker`                         | Start/end range picker.                                                                                                                                                                                                          |
| `field.ToggleSwitchField`                   | `TanstackToggleSwitchField`                             | `ToggleSwitchField` → `TanstackToggleSwitch`                               | Single boolean switch.                                                                                                                                                                                                           |
| `field.ToggleSwitchGroupField`              | `TanstackToggleSwitchGroupField`                        | `ToggleSwitchGroupField` → `TanstackToggleSwitchGroup`                     | Group of switches; value is a record.                                                                                                                                                                                            |
| `field.PasswordField`                       | `TanstackPasswordField` (registered as `PasswordField`) | `PasswordField` → `TanstackInput` (`type="password"`)                      | Adds visibility toggle button. The registered key is `PasswordField` (no `Tanstack` prefix in the source) — so usage is `field.PasswordField`. Prefer this over `<field.TextField type="password" />` for the visibility toggle. |
| `field.PhoneNumberField`                    | `TanstackPhoneNumberField`                              | `PhoneNumberField` → `TanstackPhoneNumberInput`                            | E.164-compatible phone input.                                                                                                                                                                                                    |

## Atomic parts (always available on `field`)

These are the Atomic API parts registered alongside the Composed components. Use them only when customizing layout:

- `field.Field` — the wrapper (`TanstackFormField`). Provides a11y context.
- `field.FieldLabel` — label slot.
- `field.FieldHelperText` — helper text slot.
- `field.FieldFeedbackText` — validation error slot.
- `field.FieldRawContextualLink` — contextual link slot.

And the raw inputs (use Composed instead unless customizing):

- `field.TextInput` / `field.TextAreaInput`
- `field.CheckboxInput` / `field.CheckboxGroupInput`
- `field.NumberInput`
- `field.SelectInput` / `field.MultiSelectInput`
- `field.RadioButtonInput`
- `field.SelectableButtonGroupInput`
- `field.SelectableCardCheckboxGroupInput` / `field.SelectableCardRadioGroupInput`
- `field.DatePickerInput` / `field.DateRangePickerInput`
- `field.ToggleSwitchInput` / `field.ToggleSwitchGroupInput`
- `field.PhoneNumberInput`

## Form-scoped components

Available on `form` (not `field`):

- `<form.AppForm>` — form-context provider. Required outer wrapper.
- `<form.Form>` — `<form>` element wired to `handleSubmit`.
- `<form.AppField name="…">` — field-context provider; render-prop exposes `field`.
- `<form.Subscribe selector={…}>` — selector-scoped reactive subscription. Always pass `selector`.
- `<form.InlineFieldGroup>`, `<form.InlineFieldGroupHeader>`, `<form.InlineFieldGroupReadView>`, `<form.InlineFieldGroupEditView>` — inline edition layout (read view ↔ edit view toggling for grouped fields).

For the mapping source of truth see `src/hooks/use-tanstack-form.tsx` (the `createFormHook` call). The keys in `fieldComponents` and `formComponents` are exactly the names exposed on `field` / `form`.