Content
- Placeholder describes what to add: "Add a type of person or sector".
ExperimentalmoleculeInputs
TagInput
A text field that turns entries into removable chips.
import { … } from "@brdgapp/ui/components/tag-input"Usage
TagInput is a text field that turns what you type into chips: press Enter or a comma to add, × or Backspace to remove. It trims spaces and ignores duplicates. Bridge uses it for "ICP". The usual mistake is using it for a fixed list of choices: that's a menu.
When to use
- A free-text list of short entries: sectors, types of people, keywords.
When not to use
- For choosing from a fixed list. Use FilterPill instead.
- For one value. Use a text field.
Anatomy
Seed-stage foundersClimate
Field. 40px minimum, 8px corners, grows as chips wrap.
Chip. 11px SemiBold pill, blue tint (
primary) or gray (muted), with a remove button.Text box. Where you type; its placeholder shows only when there are no chips.
Examples
ICP
Type, then press Enter.
ICP
Seed-stage foundersClimateHealth
Press Enter or a comma to add. Backspace removes the last one.
Muted chips
MarketplacesPayments
States
| Rest | Hover | Focus | |
|---|---|---|---|
| Blue chips | ClimateHealth | ClimateHealth | ClimateHealth |
| Grey chips | MarketplacesPayments | MarketplacesPayments | MarketplacesPayments |
| Empty |
| State | What happens |
|---|---|
| Focus | Blue border and a soft blue ring around the whole field. |
| Hover | Darker border. |
Behavior
- Built on Base UI: the text box is Base UI Input, so it works inside a Field, and each remove button is Base UI Button.
- Enter or comma adds the typed text. Leaving the field adds it too.
- Backspace in an empty text box removes the last chip.
- Removing a chip puts focus back in the text box.
- Clicking anywhere in the field focuses the text box.
Do and don't
Do
Explain how to add under the field.Don't
Rely on people guessing that comma adds a chip.Accessibility
- Pass
ariaLabel, or point a visible<label>at it. - Each chip's remove button is named "Remove {chip}" and has a focus ring.
| Keys | Action |
|---|---|
| Enter, | Add the typed text. |
| Backspace | In an empty text box: remove the last chip. |
| Tab | Moves through each chip's remove button, then the text box. |
API reference
TagInput
The chip field.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | The chips. |
onChange | (next: string[]) => void | — | Called with the new list. |
placeholder | string | — | Shown when empty. |
ariaLabel | string | — | The field's name. |
variant | "primary" | "muted" | "primary" | Chip color. |
className | string | — | Layout only. |
…other attributes | id, aria-*, data-*, event handlers | — | Passed to the field. The component's own props win where they overlap. |
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- Nothing else in the package
- Used by components
- None
- Used in patterns
- Forms and validationSaving and unsaved changes
- Used in templates
- None
Known gaps
Where the code still differs from the system. Follow the system, not the gap.
- Bridge OS's remove buttons are bare 12px icons with no focus ring; the package's are 20px targets with a ring.
- Bridge OS's placeholder used
--text-disabled(2:1); the package uses--text-muted. - Its chips are round pills, unlike Tag (4px). They are input chips, not labels; whether they should match Tag is undecided.
Sources
- Bridge OS
components.md→ TagInput;src/components/ui/tag-input.tsx.