useChipField
useChipField holds the chips and the input value for a Field.ChipInput, and getChipInputProps() spreads them onto it. Each commit goes through transform, or by default is trimmed with an empty value dropped, and a chip already in the list is dropped unless dedupe is false. The field itself never appends chips, so without the hook the parent's onCommit decides.
const field = useChipField({ initialChips: ['react'] })
<Field.Root aria-label="Tags">
<Field.ChipInput {...field.getChipInputProps()} placeholder="useChipField" />
</Field.Root>
react
When to use
When: Optional state helper for Field.ChipInput: chips, input value, dedupe, and transform on commit.
When not: You already own chip state → wire Field.ChipInput props directly. Picking from a list → Combobox recipe. Single value → Field.TextInput.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| initialChips | string[] | no | [] | Starting chips. |
| initialInputValue | string | no | "" | Starting input text. |
| dedupe | boolean | no | true | Skip commits that already exist. |
| transform | (raw: string) => string | null | no | — | Normalize a commit. Null rejects. Default trims and rejects empty. |