Preview
TagInput depends on client keyboard handling to commit and remove repeated form values. This server-rendered page does not imitate client behavior. Open the live playground.
Usage
TagInput usage<TagInput label="Labels" name="labels" defaultValue={['infra']} />API
TagInput APITagInputProps
Tags as PROGRESSIVE ENHANCEMENT over repeated form fields: every committed tag is a chip backed by `<input type="hidden" name={name}>`, and the entry input carries `name` too — so the server always receives the same field, as repeated values and/or comma-separated text, and `parseTags(formData.getAll(name))` flattens every path. JS-off: chips from `defaultValue` render static and the entry input still ADDS tags (comma-separated); removal is island behavior (Enter/comma commits, Backspace on an empty entry removes the last chip, × removes any).
| prop | type | notes |
|---|---|---|
| label | string | |
| name | string | Form field name — repeated per chip, plus the entry input. |
| defaultValue? | string[] | Initial tags (server-known). |
| placeholder? | string | |
| hint? | string | Machine-register hint; default explains the keys. |
| removeLabel? | (tag: string) => string | i18n: per-chip remove label (default `Remove ${tag}`). |
| mix? | MixInput |