Forms

TagField

A field you type into to choose several things, such as the brands or products on a project.

Preview

Props

Guidelines

A field you type into to choose several things, such as the brands or products on a project. Each choice becomes a token in the field with its own remove button; the menu under the field suggests matches as you type, and what isn't there yet can be added in place.

Provide: items ({ key, label, detail }), the chosen value (keys, in order) and onChange(keys). A visible label or an ariaLabel. Optional onCreate(text) with createLabel(text) ("Add brand “Halo Audio”"), placeholder, size (M, or L on phones), help, invalid and emptyText.

• Use it where a project, product or contact takes more than one of something and the list can grow long. For a handful of fixed choices (content type), use a TagGroup; for exactly one, a Picker.
• The menu shows up to eight matches that aren't chosen yet. With onCreate, a last row adds what was typed when nothing matches it exactly.
• Keyboard: Up and Down move through the menu, Enter picks, Escape closes it, Backspace on an empty field takes off the last token. Each token's remove button is reachable with Tab.
• Additions and removals are announced ("Added Lumen Optics").
• The menu is on the navigation glass like Picker's; the field itself is a solid TextField control.