Components
Item Selector
A field that opens your own picker, such as a folder browser, and shows what was picked with a chip to change it.
Playground
Figma variant
🕹 State=Default
Selected=False
Disabled=False
Error=False
Label=False
Hint=False
Form Spacing=FalseStates
Empty shows the placeholder in medium emphasis; Selected shows the item in high emphasis. Hover draws the primary tint line, Error the error line; Disabled greys the text.
Tokens
| Part | Token |
|---|---|
| Box | --color-surface-level-2, --radius-form-element-small |
| Padding | --space-tiny --space-medium |
| Placeholder / value | --color-foreground-medium-emphasis / --color-foreground-high-emphasis |
| Chip | --color-surface-level-3, --radius-full |
| Hover / error line | --color-primary-tint / --color-error |
| Disabled text | --color-foreground-low-emphasis |
Notes from Figma
- The text uses the legacy “Paragraph / Regular” style (14/24); code uses ui/text/regular, which has the same size.
- The action chip is the deprecated “Chips” component with HK Grotesk Medium 12px text; code draws it with ui/text small/bold and the Chip tokens.
- The box has a raw 8px radius; code uses --radius-form-element-small.
- A hidden link Button sits inside every variant and is never shown.
- Figma has no focus state; code adds the primary line and focus ring.
Figma to code
| Figma | React |
|---|---|
| Selected = True | value="…" |
| Error / Disabled | error / disabled |
| Label / Hint / Form Spacing | <FormField label hint spacing><ItemSelector /></FormField> |
| 🕹 State = Hover | :hover |