Navigation And Search
Token Fields
A text field that converts each accepted entry into a pill-shaped chip — the Text Field input row plus the pill grammar used for tags and badges.
Findings
What's actually in /ig
- Both halves of the token-field pattern are confirmed: the 36px text-field row (._aa48, --ig-text-input-border-prism) and the pill radius (999px) used for tags and the Stories progress segments.
Rationale
Why this component exists
Every bounded, removable value in this system renders as a pill — that's the shape grammar documented on Shape. A token field is simply a Text Field whose committed values are rendered as pills inline with the cursor, rather than a new input paradigm.
Usage
When to use it
Use when
Collecting a small number of named, removable values inline — tagging people in a post, adding usernames to a Close Friends list.
Avoid when
The value set is unbounded free text (use a plain Text Field) or single-select (use Pop Up Buttons).
Anatomy
Anatomy
- 01
Field container (Text Field anatomy)
- 02
Committed chip (pill, removable)
- 03
Cursor/input position
- 04
Suggestion row (Lockup anatomy)
Specification
Spacing, colour, type, and motion
- Field height
- 36px minimum, grows with wrapped chips
- Chip radius
- 999px (pill) — see Shape
- Chip fill
- rgb(var(--ig-secondary-background))
- Chip text
- system-12, rgb(var(--ig-primary-text))
- Border
- rgb(var(--ig-text-input-border-prism)), matching Text Fields
States
States
| State | Behaviour |
|---|---|
| Default | Field shows committed chips inline with the cursor position and keeps the 36px minimum Text Field height. |
| Hover | The field or removable chip target receives rgba(var(--ig-hover-overlay-rgb), var(--ig-hover-overlay-alpha)) without changing chip colour identity. |
| Pressed/Active | Pressed chips, remove controls, or suggestion rows use an overlay slightly deeper than hover overlay while the action is held. |
| Focused | The field uses a 2px var(--ig-stop-magenta) outline with a --radius-xs offset and places the cursor after the active token. |
| Token selected | A committed chip can be highlighted with the hover-overlay tint while its remove action is available. |
| Suggestions open | Focused input with typed text opens suggestion rows using Lockup anatomy beneath the field. |
| Disabled | The whole field, chips, and remove affordances have opacity reduced and pointer-events none. |
Examples
Real interface compositions
Post composer
Tag people field
Accepted usernames become removable pills inline with the cursor, while suggestions below reuse lockup rows for avatar, display name, and username.
36px minimum field, 999px chips, --ig-secondary-background chip fill, Text Field border
Do / Don't
Do / Don't
Do
- Render each committed value as a 999px pill, matching the system's one pill shape rather than inventing a chip-specific radius.
Don’t
- Give chips their own colour identity — they should read as neutral tokens, not status indicators.
See also