TagField
A multi-select field that displays selected items as removable tags with a searchable dropdown.
The <TagField> component allows users to select multiple options from a dropdown list. Selected items are displayed as removable tags directly inside the input area, giving users a clear overview of their choices at a glance. The component includes a built-in search field for quickly filtering through large option sets.
<TagField> is ideal for scenarios where users need to pick several items from a predefined set, such as assigning categories, tagging content, or selecting multiple preferences. Unlike a standard multi-select dropdown, the tag-based display provides immediate visual feedback and makes it easy to add or remove individual selections.
The component is built on react-aria, providing full keyboard navigation, screen reader support, and accessible interactions out of the box.
Anatomy
A <TagField> consists of a label, a trigger area with tags and an add button, and a popover containing a search input and an options list.
Label: Descriptive text guiding the user on what to select.
Container: The container area that displays selected tags and the button.
Tag: A removable chip representing a selected item. Users can click the remove icon to deselect.
Button: An icon button that opens the dropdown popover to add more selections.
Search input: A text field inside the popover that filters the available options as the user types.
Popover: The overlay container holding the search input and options list.
Section: A group of related options with a header label, used to organize options into categories.
Option: An individual selectable item in the dropdown list.
Appearance
The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.
Variant
Size
The selected theme does not has any options for "variant" and "size".
Genres
Select genres...
| Property | Type | Description |
|---|---|---|
variant | - | The available variants of this component. |
size | - | The available sizes of this component. |
Usage
The <TagField> works best when users need to select multiple items from a list of options (10+) and want to see their selections displayed compactly as tags. It combines filtering (typing to narrow down options) with visible selection feedback, saving space compared to checkboxes.
Organizing options into sections
When the list of options becomes large or covers distinct categories, grouping them into sections helps users find what they are looking for. Use the <TagField.Section> component to wrap related options, providing a header for each group to add structure and context.
Preview
Code
Genres
Preventing selection of specific options
In some cases, certain options should be visible but not selectable. For example, an option may be temporarily unavailable or restricted based on the user's permissions. Use the disabledKeys prop to mark specific options as non-interactive while keeping them visible in the list.
Preview
Code
Genres
Keep option text concise
Option labels should be short and scannable so users can quickly identify the items they need. Long or overly detailed labels slow down the selection process, especially when users are filtering by typing in the search field.
Do
Use short, recognizable option labels like "Rock", "Jazz", or "Electronic".
Don't
Don't use long descriptions as option labels, such as "Rock and Roll (including classic and modern sub-genres)".
Labeling
For general guidance on labels, placeholders, and help text, refer to the Form Fields foundation page.
Accessibility
The <TagField> supports full keyboard navigation through all its interactive parts.
| Key | Description |
|---|---|
Tab | Moves focus between the trigger, tags, add button, and other focusable elements. |
Enter | Opens the popover when the trigger or add button is focused. Selects or deselects an option when focused in the list. |
Space | Opens the popover when the trigger or add button is focused. |
Arrow Up / Arrow Down | Navigates between options in the dropdown list. |
Arrow Left / Arrow Right | Navigates between tags in the trigger area. |
Escape | Closes the popover and returns focus to the trigger. |
Backspace | Removes a tag when it is focused. |
When the popover opens, the search input receives focus automatically, allowing users to immediately start filtering options by typing.
Props
TagField
Did you know? You can explore, test, and customize props live in Marigold's storybook. Watch the effects they have in real-time!
allowsEmptyCollection?boolean;
Whether the select should be allowed to be open when the collection is empty.
aria-describedby?string;
Identifies the element (or elements) that describes the object.
aria-details?string;
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label?string;
Defines a string value that labels the current element.
aria-labelledby?string;
Identifies the element (or elements) that labels the current element.
autoComplete?string;
Describes the type of autocomplete functionality the input should provide if any. See MDN.
autoFocus?boolean;
Whether the element should receive focus on render.
children?ReactNode | ((item: T) => ReactNode);
Children of the tag field (options).
defaultOpen?boolean;
Sets the default open state of the menu.
defaultSelectedKey?Key;
The initial selected key in the collection (uncontrolled).
@deprecated
defaultValue?readonly Key[]The default value (uncontrolled).
description?string;
Set a description for the field.
dir?string;
disabled?boolean;
If the field should be disabled.
Defaults to:
"false"disabledKeys?Iterable<Key>;
The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
emptyState?ReactNode;
Provides content to display when there are no items in the list.
error?boolean;
If the field should show an error state.
Defaults to:
"false"errorMessage?string | ((validation: ValidationResult) => string);
Set an error message for the field.
excludeFromTabOrder?boolean;
Whether to exclude the element from the sequential tab order. If true,
the element will not be focusable via the keyboard by tabbing. This should
be avoided except in rare scenarios where an alternative means of accessing
the element or its functionality via the keyboard is available.
form?string;
The
<form> element to associate the input with.
The value of this attribute must be the id of a <form> in the same document.
See MDN.hidden?boolean;
id?string;
The element's unique identifier. See MDN.
inert?boolean;
items?Iterable<T>;
Items of the tag field.
label?ReactNode;
Set a label for the field.
lang?string;
name?string;
The name of the input, used when submitting an HTML form.
onAnimationEnd?AnimationEventHandler<HTMLDivElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLDivElement>;
onAnimationIteration?AnimationEventHandler<HTMLDivElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLDivElement>;
onAnimationStart?AnimationEventHandler<HTMLDivElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLDivElement>;
onAuxClick?MouseEventHandler<HTMLDivElement>;
onAuxClickCapture?MouseEventHandler<HTMLDivElement>;
onBlur?(e: FocusEvent<Element, Element>) => void;
Handler that is called when the element loses focus.
onChange?(value: Key[]) => void;
Handler that is called when the value changes.
onClick?MouseEventHandler<HTMLDivElement>;
onClickCapture?MouseEventHandler<HTMLDivElement>;
onContextMenu?MouseEventHandler<HTMLDivElement>;
onContextMenuCapture?MouseEventHandler<HTMLDivElement>;
onDoubleClick?MouseEventHandler<HTMLDivElement>;
onDoubleClickCapture?MouseEventHandler<HTMLDivElement>;
onFocus?(e: FocusEvent<Element, Element>) => void;
Handler that is called when the element receives focus.
onFocusChange?(isFocused: boolean) => void;
Handler that is called when the element's focus status changes.
onGotPointerCapture?PointerEventHandler<HTMLDivElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLDivElement>;
onKeyDown?(e: KeyboardEvent) => void;
Handler that is called when a key is pressed.
onKeyUp?(e: KeyboardEvent) => void;
Handler that is called when a key is released.
onLostPointerCapture?PointerEventHandler<HTMLDivElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLDivElement>;
onMouseDown?MouseEventHandler<HTMLDivElement>;
onMouseDownCapture?MouseEventHandler<HTMLDivElement>;
onMouseEnter?MouseEventHandler<HTMLDivElement>;
onMouseLeave?MouseEventHandler<HTMLDivElement>;
onMouseMove?MouseEventHandler<HTMLDivElement>;
onMouseMoveCapture?MouseEventHandler<HTMLDivElement>;
onMouseOut?MouseEventHandler<HTMLDivElement>;
onMouseOutCapture?MouseEventHandler<HTMLDivElement>;
onMouseOver?MouseEventHandler<HTMLDivElement>;
onMouseOverCapture?MouseEventHandler<HTMLDivElement>;
onMouseUp?MouseEventHandler<HTMLDivElement>;
onMouseUpCapture?MouseEventHandler<HTMLDivElement>;
onOpenChange?(isOpen: boolean) => void;
Method that is called when the open state of the menu changes.
onPointerCancel?PointerEventHandler<HTMLDivElement>;
onPointerCancelCapture?PointerEventHandler<HTMLDivElement>;
onPointerDown?PointerEventHandler<HTMLDivElement>;
onPointerDownCapture?PointerEventHandler<HTMLDivElement>;
onPointerEnter?PointerEventHandler<HTMLDivElement>;
onPointerLeave?PointerEventHandler<HTMLDivElement>;
onPointerMove?PointerEventHandler<HTMLDivElement>;
onPointerMoveCapture?PointerEventHandler<HTMLDivElement>;
onPointerOut?PointerEventHandler<HTMLDivElement>;
onPointerOutCapture?PointerEventHandler<HTMLDivElement>;
onPointerOver?PointerEventHandler<HTMLDivElement>;
onPointerOverCapture?PointerEventHandler<HTMLDivElement>;
onPointerUp?PointerEventHandler<HTMLDivElement>;
onPointerUpCapture?PointerEventHandler<HTMLDivElement>;
onScroll?UIEventHandler<HTMLDivElement>;
onScrollCapture?UIEventHandler<HTMLDivElement>;
onSelectionChange?(key: Key | null) => void;
Handler that is called when the selection changes.
@deprecated
onTouchCancel?TouchEventHandler<HTMLDivElement>;
onTouchCancelCapture?TouchEventHandler<HTMLDivElement>;
onTouchEnd?TouchEventHandler<HTMLDivElement>;
onTouchEndCapture?TouchEventHandler<HTMLDivElement>;
onTouchMove?TouchEventHandler<HTMLDivElement>;
onTouchMoveCapture?TouchEventHandler<HTMLDivElement>;
onTouchStart?TouchEventHandler<HTMLDivElement>;
onTouchStartCapture?TouchEventHandler<HTMLDivElement>;
onTransitionCancel?TransitionEventHandler<HTMLDivElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLDivElement>;
onTransitionEnd?TransitionEventHandler<HTMLDivElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLDivElement>;
onTransitionRun?TransitionEventHandler<HTMLDivElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLDivElement>;
onTransitionStart?TransitionEventHandler<HTMLDivElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLDivElement>;
onWheel?WheelEventHandler<HTMLDivElement>;
onWheelCapture?WheelEventHandler<HTMLDivElement>;
open?boolean;
If the dropdown should be open.
Defaults to:
"false"placeholder?string;
Placeholder text when no items are selected.
ref?Ref<HTMLDivElement>;
Allows getting a ref to the component instance.
Once the component unmounts, React will set
ref.current to null
(or call the ref with null if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}render?DOMRenderFunction<"div", SelectRenderProps>;
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Requirements:
- You must render the expected element type (e.g. if
<button>is expected, you cannot render an<a>). - Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
required?boolean;
If the field should be required.
Defaults to:
"false"selectedKey?Key | null;
The currently selected key in the collection (controlled).
@deprecated
slot?string | null;
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit
null value indicates that the local props completely override all props received from a parent.translate?"yes" | "no";
validate?(value: Key[]) => true | ValidationError | null;
A function that returns an error message if a given value is invalid.
Validation errors are displayed to the user when the form is submitted
if
validationBehavior="native". For realtime validation, use the isInvalid
prop instead.validationBehavior?"native" | "aria";
Whether to use native HTML form validation to prevent form submission
when the value is missing or invalid, or mark the field as required
or invalid via ARIA.
Defaults to:
'native'value?readonly Key[]The current value (controlled).
width?WidthProp;
Sets the width of the element. You can see allowed tokens here.
TagField.Option
aria-label?string;
An accessibility label for this item.
children?ReactNode;
The children of the component
dir?string;
download?string | boolean;
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.
hidden?boolean;
href?string;
A URL to link to. See MDN.
hrefLang?string;
Hints at the human language of the linked URL. SeeMDN.
id?Key;
The unique id of the item.
inert?boolean;
isDisabled?boolean;
Whether the item is disabled.
lang?string;
onAction?() => void;
Handler that is called when a user performs an action on the item. The exact user event depends on
the collection's
selectionBehavior prop and the interaction modality.onAnimationEnd?AnimationEventHandler<HTMLDivElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLDivElement>;
onAnimationIteration?AnimationEventHandler<HTMLDivElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLDivElement>;
onAnimationStart?AnimationEventHandler<HTMLDivElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLDivElement>;
onAuxClick?MouseEventHandler<HTMLDivElement>;
onAuxClickCapture?MouseEventHandler<HTMLDivElement>;
onBlur?(e: FocusEvent<HTMLDivElement, Element>) => void;
Handler that is called when the element loses focus.
onClick?(e: MouseEvent<FocusableElement, MouseEvent>) => void;
Not recommended – use
onPress instead. onClick is an alias for onPress
provided for compatibility with other libraries. onPress provides
additional event details for non-mouse interactions.onClickCapture?MouseEventHandler<HTMLDivElement>;
onContextMenu?MouseEventHandler<HTMLDivElement>;
onContextMenuCapture?MouseEventHandler<HTMLDivElement>;
onDoubleClick?MouseEventHandler<HTMLDivElement>;
onDoubleClickCapture?MouseEventHandler<HTMLDivElement>;
onFocus?(e: FocusEvent<HTMLDivElement, Element>) => void;
Handler that is called when the element receives focus.
onFocusChange?(isFocused: boolean) => void;
Handler that is called when the element's focus status changes.
onGotPointerCapture?PointerEventHandler<HTMLDivElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLDivElement>;
onHoverChange?(isHovering: boolean) => void;
Handler that is called when the hover state changes.
onHoverEnd?(e: HoverEvent) => void;
Handler that is called when a hover interaction ends.
onHoverStart?(e: HoverEvent) => void;
Handler that is called when a hover interaction starts.
onLostPointerCapture?PointerEventHandler<HTMLDivElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLDivElement>;
onMouseDown?MouseEventHandler<HTMLDivElement>;
onMouseDownCapture?MouseEventHandler<HTMLDivElement>;
onMouseEnter?MouseEventHandler<HTMLDivElement>;
onMouseLeave?MouseEventHandler<HTMLDivElement>;
onMouseMove?MouseEventHandler<HTMLDivElement>;
onMouseMoveCapture?MouseEventHandler<HTMLDivElement>;
onMouseOut?MouseEventHandler<HTMLDivElement>;
onMouseOutCapture?MouseEventHandler<HTMLDivElement>;
onMouseOver?MouseEventHandler<HTMLDivElement>;
onMouseOverCapture?MouseEventHandler<HTMLDivElement>;
onMouseUp?MouseEventHandler<HTMLDivElement>;
onMouseUpCapture?MouseEventHandler<HTMLDivElement>;
onPointerCancel?PointerEventHandler<HTMLDivElement>;
onPointerCancelCapture?PointerEventHandler<HTMLDivElement>;
onPointerDown?PointerEventHandler<HTMLDivElement>;
onPointerDownCapture?PointerEventHandler<HTMLDivElement>;
onPointerEnter?PointerEventHandler<HTMLDivElement>;
onPointerLeave?PointerEventHandler<HTMLDivElement>;
onPointerMove?PointerEventHandler<HTMLDivElement>;
onPointerMoveCapture?PointerEventHandler<HTMLDivElement>;
onPointerOut?PointerEventHandler<HTMLDivElement>;
onPointerOutCapture?PointerEventHandler<HTMLDivElement>;
onPointerOver?PointerEventHandler<HTMLDivElement>;
onPointerOverCapture?PointerEventHandler<HTMLDivElement>;
onPointerUp?PointerEventHandler<HTMLDivElement>;
onPointerUpCapture?PointerEventHandler<HTMLDivElement>;
onPress?(e: PressEvent) => void;
Handler that is called when the press is released over the target.
onPressChange?(isPressed: boolean) => void;
Handler that is called when the press state changes.
onPressEnd?(e: PressEvent) => void;
Handler that is called when a press interaction ends, either
over the target or when the pointer leaves the target.
onPressStart?(e: PressEvent) => void;
Handler that is called when a press interaction starts.
onPressUp?(e: PressEvent) => void;
Handler that is called when a press is released over the target, regardless of
whether it started on the target or not.
onScroll?UIEventHandler<HTMLDivElement>;
onScrollCapture?UIEventHandler<HTMLDivElement>;
onTouchCancel?TouchEventHandler<HTMLDivElement>;
onTouchCancelCapture?TouchEventHandler<HTMLDivElement>;
onTouchEnd?TouchEventHandler<HTMLDivElement>;
onTouchEndCapture?TouchEventHandler<HTMLDivElement>;
onTouchMove?TouchEventHandler<HTMLDivElement>;
onTouchMoveCapture?TouchEventHandler<HTMLDivElement>;
onTouchStart?TouchEventHandler<HTMLDivElement>;
onTouchStartCapture?TouchEventHandler<HTMLDivElement>;
onTransitionCancel?TransitionEventHandler<HTMLDivElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLDivElement>;
onTransitionEnd?TransitionEventHandler<HTMLDivElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLDivElement>;
onTransitionRun?TransitionEventHandler<HTMLDivElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLDivElement>;
onTransitionStart?TransitionEventHandler<HTMLDivElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLDivElement>;
onWheel?WheelEventHandler<HTMLDivElement>;
onWheelCapture?WheelEventHandler<HTMLDivElement>;
ping?string;
A space-separated list of URLs to ping when the link is followed. See MDN.
referrerPolicy?HTMLAttributeReferrerPolicy;
How much of the referrer to send when following the link. See MDN.
rel?string;
The relationship between the linked resource and the current page. See MDN.
render?(
props:
| DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement>
| DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
renderProps: ListBoxItemRenderProps,
) => ReactElement<...>;
Overrides the default DOM element with a custom render function.
This allows rendering existing components with built-in styles and behaviors
such as router links, animation libraries, and pre-styled components.
Note: You can check if
'href' in props in order to tell whether to render an <a> element.
Requirements:
- You must render the expected element type (e.g. if
<a>is expected, you cannot render a<button>). - Only a single root DOM element can be rendered (no fragments).
- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
routerOptions?undefined;
Options for the configured client side router.
target?HTMLAttributeAnchorTarget;
The target window for the link. See MDN.
textValue?string;
A string representation of the item's contents, used for features like typeahead.
translate?"yes" | "no";
value?object;
The object value that this item represents. When using dynamic collections, this is set automatically.
TagField.Section
aria-label?string;
An accessibility label for the section.
childrenReactNode;
Children of the section.
dependencies?readonly any[]Values that should invalidate the item cache when using dynamic collections.
dir?string;
headerReactNode;
Section header to display.
hidden?boolean;
id?Key;
The unique id of the section.
inert?boolean;
items?Iterable<object>;
Item objects in the section.
lang?string;
onAnimationEnd?AnimationEventHandler<HTMLElement>;
onAnimationEndCapture?AnimationEventHandler<HTMLElement>;
onAnimationIteration?AnimationEventHandler<HTMLElement>;
onAnimationIterationCapture?AnimationEventHandler<HTMLElement>;
onAnimationStart?AnimationEventHandler<HTMLElement>;
onAnimationStartCapture?AnimationEventHandler<HTMLElement>;
onAuxClick?MouseEventHandler<HTMLElement>;
onAuxClickCapture?MouseEventHandler<HTMLElement>;
onClick?MouseEventHandler<HTMLElement>;
onClickCapture?MouseEventHandler<HTMLElement>;
onContextMenu?MouseEventHandler<HTMLElement>;
onContextMenuCapture?MouseEventHandler<HTMLElement>;
onDoubleClick?MouseEventHandler<HTMLElement>;
onDoubleClickCapture?MouseEventHandler<HTMLElement>;
onGotPointerCapture?PointerEventHandler<HTMLElement>;
onGotPointerCaptureCapture?PointerEventHandler<HTMLElement>;
onLostPointerCapture?PointerEventHandler<HTMLElement>;
onLostPointerCaptureCapture?PointerEventHandler<HTMLElement>;
onMouseDown?MouseEventHandler<HTMLElement>;
onMouseDownCapture?MouseEventHandler<HTMLElement>;
onMouseEnter?MouseEventHandler<HTMLElement>;
onMouseLeave?MouseEventHandler<HTMLElement>;
onMouseMove?MouseEventHandler<HTMLElement>;
onMouseMoveCapture?MouseEventHandler<HTMLElement>;
onMouseOut?MouseEventHandler<HTMLElement>;
onMouseOutCapture?MouseEventHandler<HTMLElement>;
onMouseOver?MouseEventHandler<HTMLElement>;
onMouseOverCapture?MouseEventHandler<HTMLElement>;
onMouseUp?MouseEventHandler<HTMLElement>;
onMouseUpCapture?MouseEventHandler<HTMLElement>;
onPointerCancel?PointerEventHandler<HTMLElement>;
onPointerCancelCapture?PointerEventHandler<HTMLElement>;
onPointerDown?PointerEventHandler<HTMLElement>;
onPointerDownCapture?PointerEventHandler<HTMLElement>;
onPointerEnter?PointerEventHandler<HTMLElement>;
onPointerLeave?PointerEventHandler<HTMLElement>;
onPointerMove?PointerEventHandler<HTMLElement>;
onPointerMoveCapture?PointerEventHandler<HTMLElement>;
onPointerOut?PointerEventHandler<HTMLElement>;
onPointerOutCapture?PointerEventHandler<HTMLElement>;
onPointerOver?PointerEventHandler<HTMLElement>;
onPointerOverCapture?PointerEventHandler<HTMLElement>;
onPointerUp?PointerEventHandler<HTMLElement>;
onPointerUpCapture?PointerEventHandler<HTMLElement>;
onScroll?UIEventHandler<HTMLElement>;
onScrollCapture?UIEventHandler<HTMLElement>;
onTouchCancel?TouchEventHandler<HTMLElement>;
onTouchCancelCapture?TouchEventHandler<HTMLElement>;
onTouchEnd?TouchEventHandler<HTMLElement>;
onTouchEndCapture?TouchEventHandler<HTMLElement>;
onTouchMove?TouchEventHandler<HTMLElement>;
onTouchMoveCapture?TouchEventHandler<HTMLElement>;
onTouchStart?TouchEventHandler<HTMLElement>;
onTouchStartCapture?TouchEventHandler<HTMLElement>;
onTransitionCancel?TransitionEventHandler<HTMLElement>;
onTransitionCancelCapture?TransitionEventHandler<HTMLElement>;
onTransitionEnd?TransitionEventHandler<HTMLElement>;
onTransitionEndCapture?TransitionEventHandler<HTMLElement>;
onTransitionRun?TransitionEventHandler<HTMLElement>;
onTransitionRunCapture?TransitionEventHandler<HTMLElement>;
onTransitionStart?TransitionEventHandler<HTMLElement>;
onTransitionStartCapture?TransitionEventHandler<HTMLElement>;
onWheel?WheelEventHandler<HTMLElement>;
onWheelCapture?WheelEventHandler<HTMLElement>;
translate?"yes" | "no";
value?object;
The object value that this section represents. When using dynamic collections, this is set automatically.
Alternative components
- ComboBox: When users need to select a single value from a filterable list, or when they should be able to type a custom value.
- Select: When users need to choose a single option from a dropdown without a search field.
- SelectList: When you need more than just a text label to represent options and want a persistent, visible list.
- Checkbox: When there are fewer than 10 options and all choices should be visible at once without a dropdown.
Related
Multiple Selection
Guidelines for implementing multiple selection patterns.
Form development guide
Learn how to build forms.
Form Fields
Learn about form field foundations.
Last update: 4 hours ago