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

useChipField props
NameTypeRequiredDefaultDescription
initialChipsstring[]no[]Starting chips.
initialInputValuestringno""Starting input text.
dedupebooleannotrueSkip commits that already exist.
transform(raw: string) => string | nullno—Normalize a commit. Null rejects. Default trims and rejects empty.