UNPKG

@payfit/unity-components

Version:

68 lines (53 loc) • 9.71 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# 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`.