Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.

Component Guide

import { SelectInput } from '@uhg-abyss/web/ui/SelectInput';

label

subText

width

hideLabel

isClearable

isDisabled

isSearchable

() => {
  const [value, setValue] = useState(['alpine']);

  const onSubmit = () => {
    console.log('value', value);
  };

  return (
    <Stack gap="$web.semantic.spacing.scale.md">
      <SelectInput
        isMulti
        label="Your favorite framework/library"
        value={value}
        onChange={setValue}
        isClearable
        isSearchable
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
      <Button
        onClick={onSubmit}
        css={{ 'abyss-button-root': { width: 'fit-content' } }}
      >
        Submit
      </Button>
    </Stack>
  );
};

Usage

Multi-select

To switch to multi-select mode, set the isMulti prop to true. This allows users to select multiple values from the provided list of options.

Options

Use the options prop to supply the drop-down menu options that will be available for selection. options is an array of objects, where each object has a base that includes the following properties:

• value: unique identifier for the option
• label: content the option will display within the menu list

[
  { value: 'id1', label: 'Option 1' },
  { value: 'id2', label: 'Option 2' },
  { value: 'id3', label: 'Option 3' },
   ...
]

Sections can also be specified. See Section Headers for more details.

valueKey / labelKey

If your data structure uses different property names than value and label, you can map them using the valueKey and labelKey props without restructuring your data.

• valueKey: Specifies which property to use as the option's value (defaults to "value")
• labelKey: Specifies which property to use as the option's display text (defaults to "label")

This is particularly useful when working with API responses or existing data structures that can't be easily transformed.

Form integration

useForm (recommended)

Using useForm and FormProvider simplifies form management by providing out-of-the-box validation, form state handling, and performance optimizations, leveraging the power of react-hook-form.

useState

Using the useState hook gets values from the component state.

Display properties

Label

The label prop is required. The hideLabel prop can be set to true to hide the label visually, but still allow it to be accessible to screen readers.

Helper

Use the helper prop to display a help icon next to the label. Simply passing a string value will render the default helper, a Tooltip containing that string. The helper can be customized by passing in a node. It is recommended to use either a Tooltip or a Popover. See When should I use a Tooltip vs. a Popover? for more information on best practices regarding the two.

Subtext

Use the subText prop to display helpful information related to the input field. The prop accepts either a string or an object of the form:

{
  text: string;
  position: 'above' | 'below';
}

The position property determines where the subtext will be displayed in relation to the input field. The default value is 'below'.

Width

Use the width prop to set the width of the select list.

Left element

Use the inputLeftElement prop to add an element inside of the text input field. The recommended usage is for inserting icons. The prop accepts an object with the following properties:

• element: The element to be displayed inside the input field.
• description: An optional string that describes the purpose of the element for screen readers.

These are considered decorative and do not need to be exposed to screen readers. That said, please note that icons should not provide any information that is not also conveyed in a screen-readable way. For example, an exclamation mark (!) icon to indicate errors needs to be accompanied by aria-invalid.

If the icon is used to convey additional information, use the inputLeftElement.description prop to provide a description for screen readers.

Validation

Validators (useForm)

Form Compatibility

useState

useForm

Use the validators prop to set rules for the field to be valid.

Tip

The default error message when required is true is minimally acceptable for accessibility. It is highly recommended to customize it to be more specific to the use of the field and form.

Error message (useState)

Form Compatibility

useState

useForm

Use the errorMessage prop to display a custom error message below the select field when using useState.

Success message

Form Compatibility

useState

useForm

Use the successMessage prop to display a custom success message below the input field. To provide a single success message across all form input components using useForm/FormProvider, you can provide successMessage to FormProvider as shown here.

Highlighted

Form Compatibility

useState

useForm

Use the highlighted prop to enable a distinct background color when fields are required. To supply this across all form input components using useForm/FormProvider, you can provide highlighted to FormProvider as shown here.

Validation below menu

Form Compatibility

useState

useForm

Set the validationBelowMenu prop to true to relocate the error and success message validation to below the menu, when open.

The default is false and the validation message will always remain displayed below the selection container, even when the menu is open.

Interactivity

Clearable

Use the isClearable prop to allow for clearable select lists. If true, a clear button will appear in the input. The optional onClear callback prop can be used to trigger additional actions when the clear button is clicked.

Select all

By setting the selectAll property to true, you can make a "Select All" option visible at the top of the dropdown. When selected, all options will be selected. When deselected, all options will be deselected.

Disabled

Set the isDisabled prop to true to disable the select list input field, so users cannot select a value.

Enable outside scroll

Set the enableOutsideScroll prop to true to enable scrolling outside the search input component while the option list is open. Default is set to false.

Search filtering

Use the isSearchable prop to add an input field within the drop-down menu for the user to search/filter the list of options.

Fuse.js

When isSearchable is true, the component utilizes the Fuse.jsopens in a new window library to implement fuzzy searching. The following sections describe how to customize the Fuse configuration using the searchConfig prop.

Fuse keys

The keys prop allows you to specify the values from the specific keys within your options object to search against. This feature accommodates nested paths, prioritizes certain fields with weighted search, and can handle searches within arrays of objects. The default search keys are ['label', 'value'].

For example, if the options contained objects of the following structure:

{
value: "react",
label: "React",
tags: ['jsx', 'virtual dom', 'facebook']
}

and you wanted to allow users to search on the label and tags values, you would provide the following, as in the example below:

searchConfig={{ keys: ['label', 'tags'] }}

Custom Fuse configurations

The Fuse configuration can be customized by following the Fuse documentationopens in a new window and passing the configurations into the searchConfig prop.

For example, if you wanted to adjust the thresholdopens in a new window to 0, thus requiring an exact match, you would pass in the following object. The default threshold is 0.1.

const customFuseConfig = {
  threshold: 0, // exact match
};

Highlighted search results

By default, highlightMatches is true and matching text in search results is highlighted with a yellow background color bold font weight based on the following criteria:

• not selected: the matching text displays as bold
• selected: the matching text displays as regular

The highlightMatches prop accepts either a boolean or an object:

// Boolean usage
highlightMatches: boolean

// Object usage
highlightMatches: {
  fuzzyHighlighting?: boolean;
  colorHighlighting?: boolean;
}

To completely disable highlighting, set highlightMatches to false.

API filtering with debounce

To override the Fuse filtering and make asynchronous calls to an API to set the list of dropdown options, use a combination of the onInputChange, options, and isLoading props.

While searching, onInputChange will supply the current search value and the value of the current selections. isLoading controls the built-in loading spinner. After retrieving the option items from the API, pass them into the options prop.

To incorporate debouncing into the search, use the useDebounce hook.

import { useDebounce } from '@uhg-abyss/web/hooks/useDebounce';

When using debounce, it is recommended to use the customNoOptionsMessage prop to control the display message when there are no options available and/or when no search results are found.

This example shows all of these concepts together. The apiFilter function is called on every keystroke, but the API call is debounced to only occur after 600ms of inactivity. Search "united" to see the API call in action.

Menu option configurations

Disable option items

Disable an individual option item by setting the isDisabled key to true within the object.

Option list height

Use the maxListHeight prop to set the maximum height the option list can be before it becomes scrollable. The default value is 185px.

Section headers

To group list items under section headers, pass objects into the options array that have the section and items properties. section specifies the name of the section, which will be bolded and unselectable, while items contains the options within that section (with the same value/label format as normal), which will appear indented.

To retain section headers after searching with isSearchable, set retainSectionHeader within searchConfig to true.

[
  { value: 'id1', label: 'Option 1' },
  { value: 'id2', label: 'Option 2' },
  {
    section: 'Section Header',
    items: [
      { value: 'id3', label: 'Sub-section Option 1' },
      { value: 'id4', label: 'Sub-section Option 2' },
      ...
    ],
  },
   ...
]

Custom render

Use the customRender prop to customize the render of each option item. If section headers are used, they will also be handled by this function. customRender provides the item object as the first parameter and the item's state as the second.

Virtualization

Use the virtual prop to add virtualization and improve performance when working with larger data sets. Virtualization leverages the useVirtualization hook, which utilizes the TanStack Virtual library. Setting virtual to true will utilize the default configuration. virtual also accepts an object to configure the virtualizer. To see all available values that may be provided to the virtual prop, please refer to the TanStack Virtual documentationopens in a new window.

To maximize performance, virtualization for the SelectInput component is configured by default to use fixed sizing based on an option item element height of 38px. If your item height remains fixed but is different from the default, utilize the estimateSizeopens in a new window function. If the item height is unknown prior to rendering, enable dynamic sizing by setting dynamicSizing to true.

The default settings used in SelectInput are as follows:

• estimateSize: Sets item height when using fixed sizing. When using dynamic sizing, to help with scroll performance, set this to the largest possible height of the item elements (default value is 38).
• dynamicSizing: When true, each option item element is dynamically measured on render. Scrolling performance may not be as smooth when using this prop (default value is false).
• overscan: The number of element items to render above and below the visible area (default value is 5).

SelectInput Props

Name	Type	Default	Required	A11y	Description
className	string | undefined				CSS class name to apply to each element within the component
css	CSSProperties | Partial<Record<"abyss-select-input-selections" | "abyss-select-input-menu-option" | "abyss-select-input-menu-search-wrapper" | "abyss-select-input-label" | ... 18 more ... | "abyss-select-input-menu-loading-spinner", CSSProperties>> | undefined				Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
customNoOptionsMessage	string | undefined				Custom messaging for when no options are available
customRender	((item: SelectionMenuOption | SelectionMenuSection, itemState: SelectionMenuOptionStatusState) => ReactElement<...>) | undefined				A custom render function for rendering each option
data-testid	string | undefined				Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean | undefined	false			If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
enableOutsideScroll	boolean | undefined	false			Enable outside scroll when the select input is open.
errorMessage	string | undefined				Error message to display for the input. Only used when not in a FormProvider. errorMessage should not exist in useForm mode.
helper	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined				Helper element next to label
hiddenFrom	Breakpoint | undefined				When defined, the component is hidden once the screen width reaches the specified breakpoint.
hideLabel	boolean | undefined	false			If true, hides the label visually while keeping it accessible to screen readers.
highlighted	boolean | undefined	false			If true, the input field will be highlighted
highlightMatches	boolean | { fuzzyHighlighting?: boolean | undefined; colorHighlighting?: boolean | undefined; } | undefined	true			Determines if the search matches should be highlighted. Can be a boolean or an object with advanced highlighting options.
inputLeftElement	{ element: ReactNode; description?: string | undefined; } | undefined				Content to be displayed as a left element within the input (typically a IconSymbol)
isClearable	boolean | undefined				If true, the input will display a clear button
isDisabled	boolean | undefined	false			If true, the input will be disabled
isLoading	boolean | undefined	false			Whether the input is loading.
isMulti	boolean | undefined	false			Whether the input allows multiple selections.
isRequired	boolean | undefined				Whether the input is required. Only used when not in a FormProvider. isRequired should not exist in useForm mode.
isSearchable	boolean | undefined	false			Whether the input is searchable.
label	string				The label for the input; associated with it so screen readers announce it as the input's accessible name.
labelKey	string | undefined	'label'			Key for the label in the options.
maxListHeight	string | number | undefined	'200px'			Maximum height for the list.
model	string | undefined				model should not exist in useState mode. Model name for form validation. Only used when in a FormProvider.
onBlur	FocusEventHandler<HTMLInputElement> | undefined				Callback function executed when the input is blurred
onChange	((value: string[] | number[], selectedOptions?: Record<string, any>[] | undefined) => void) | ((value: string | number, selectedOption?: Record<string, any> | undefined) => void) | undefined				Callback fired every time the selection value changes
onClear	(() => void) | undefined				Callback function executed when the input is cleared
onFocus	FocusEventHandler<HTMLInputElement> | undefined				Callback function executed when the input is focused
onInputChange	((inputValue: string, selection?: SelectionType | undefined) => void) | undefined				Callback fired when the input value changes
onOpenChange	((isOpen: boolean) => void) | undefined				Callback fired when the dropdown menu opens or closes
options	(SelectionMenuOption | SelectionMenuSection)[] | undefined				Options for the select input.
searchConfig	false | SearchConfig<FlattenedOption> | undefined				Configuration for the search. When set to false, disables internal filtering.
selectAll	boolean | undefined				Whether to select all options.
slotProps	SelectInputSlotPropsMap | undefined				Props to pass to individual internal slots of the component. To target slots inside sub-components (e.g. Selections or SearchFilter), nest the sub-component's slotProps under the parent slot key: slotProps={{ 'select-input-selections': { slotProps: { 'select-input-selection-container': {...} } } }} See slotProps for more information
subText	string | { text: string; position: SubTextPosition; } | undefined				Additional descriptive text for the input
successMessage	string | undefined				Success message to display for the input
validationBelowMenu	boolean | undefined	false			Displays error and success validation messages below the menu.
validators	RegisterOptions | undefined				validators should not exist in useState mode. Validators for the input. Only used when in a FormProvider.
value	string | number | string[] | number[] | undefined				Selection option value or list of option values Selected option value
valueKey	string | undefined	'value'			Key for the value in the options.
virtual	boolean | VirtualConfig | undefined				Adds virtualization to option item drop-down list. Can be a boolean or object with additional virtual scrolling configurations.
visibleFrom	Breakpoint | undefined				When defined, the component is hidden until the screen width reaches the specified breakpoint.
width	string | number | undefined	'100%'			Width of the input.

SelectInput Classes

Class Name	Description
.abyss-select-input-clear-button	Button to clear selection
.abyss-select-input-container	Primary container for the SelectInput
.abyss-select-input-container-wrapper	Wrapper for selection container interior elements
.abyss-select-input-descriptors	Descriptors for SelectInput (error/success)
.abyss-select-input-dismissable-layer	Dismissable layer for dropdown menu
.abyss-select-input-label	SelectInput label
.abyss-select-input-left-element	SelectInput left element
.abyss-select-input-menu-container	Container for the dropdown menu
.abyss-select-input-menu-expand-icon	Icon for expanding/collapsing the dropdown menu
.abyss-select-input-menu-expand-icon-container	Container for the dropdown expand icon
.abyss-select-input-menu-loading-spinner	Loading spinner in dropdown menu
.abyss-select-input-menu-no-options-content	Content shown when no options are available
.abyss-select-input-menu-option	SelectionOption rendered for each dropdown menu item
.abyss-select-input-menu-option-list-container	Container for all options in dropdown menu (implemented in SelectionMenu)
.abyss-select-input-menu-search-wrapper	SearchFilter sub-component rendered when `isSearchable` is true
.abyss-select-input-menu-section-list	List of section options in dropdown menu (implemented in SelectionMenu)
.abyss-select-input-menu-top-container	Container for loading spinner in dropdown menu
.abyss-select-input-menu-virtual-wrapper	Wrapper for virtualized menu items (implemented in SelectionMenu)
.abyss-select-input-portal-container	Portal container for dropdown menu
.abyss-select-input-root	SelectInput root element
.abyss-select-input-selections	Selections sub-component displaying selected item(s)
.abyss-select-input-sub-text	Subtext element
.abyss-select-input-wrapper	Wrapper for all non-portal/menu elements

A combobox is a widget made up of the combination of two distinct elements:

• A single-line textbox.
• An associated pop-up element for helping users set the value of the textbox.

The popup may be a listbox, grid, tree, or dialog. Many implementations also include a third optional element -- a graphical button adjacent to the textbox, indicating the availability of the popup. Activating the button displays the popup if suggestions are available.

SelectInput in multi-mode adheres to the Combobox WAI-ARIA design patternopens in a new window.

However, SelectInput in multi-mode is not a standard combobox.

• It is a merger of a list of selected chips (which can be cleared), and a combobox that allows selection.
  • We've moved the textbox into the pop-up menu above the listbox, and placed the chips where the textbox typically resides.
• It is a multi-selection combobox - which lacks a specific WAI-ARIA example.
  • The most similar "single-select" combobox example (of the 5 provided) seems to be the Editable Combobox With List Autocomplete Exampleopens in a new window.

Thus, there is no fully defined WAI-ARIA pattern for SelectInputMulti.

SelectInput in multi-mode follows the WAI-ARIA combobox standard for all keystrokes, except for the Enter key, which toggles the checkboxes in the list.

Known Axe false positives

When the menu is open, Axe may report a region (moderate) issue because the portal content is not nested inside <main> or another landmark. Moving the portal would risk breaking changes for consumers relying on the current portal placement, so this finding is white-listed and will be revisited in a future major version.

Keyboard Interactions

Key	Description
Down Arrow	If the listbox is displayed: Moves focus to the second suggested value. Note that the first value is automatically selected. If the listbox is not displayed: opens the listbox and moves focus to the first value.
Up Arrow	If the listbox is displayed, moves focus to the last suggested value. If the listbox is not displayed, opens the listbox and moves focus to the last value.
Enter	If the listbox is displayed and the first option is automatically selected: Sets the textbox value to the content of the selected option. Closes the listbox.
Esc	If the listbox is displayed, closes it.
Supported Keystrokes	Supported keystrokes use character matching functionality to display matched values in the Listbox.

Keyboard Interactions

Key	Description
Enter	Opens combobox dropdown then if searchable: sets focus to textbox; if not searchable: sets focus to first selected option in the listbox; if no option is selected, focus to the first option.
Down Arrow	Opens combobox dropdown then if searchable: sets focus to textbox; if not searchable: sets focus to first selected option in the listbox.
Up Arrow	Opens combobox dropdown then if searchable: sets focus to textbox; if not searchable: sets focus to last selected option in the listbox.

Keyboard Interactions

Key	Description
Down Arrow	Moves visual focus to the next option. If focus is on the last option, moves focus to the first option.
Up Arrow	Moves visual focus to the previous option. If focus is on the first option, moves focus to the last option.
Printable characters	Inserts character into textbox, updates listbox, highlighting matches, if any.
Shift + Spacebar	Inserts space character into textbox (Unshifted spacebar used for selection).
Backspace	Deletes character to left of editing cursor.
Delete	Deletes character to right of editing cursor.
Right Arrow	Moves editing cursor one character to the right.
Left Arrow	Moves editing cursor one character to the left.
Home	Moves editing cursor to start of textbox.
End	Moves editing cursor to end of textbox.

Keyboard Interactions

Key	Description
Spacebar	Toggles current highlighted option.
Shift + Spacebar	Moves visual focus to textbox and inserts space character.
Enter	Toggles current highlighted option, closes dialog/listbox, sets focus on Selection Button.
Esc	Closes dialog/listbox. Sets focus on the Selection Button.
Down Arrow	Moves visual focus to the next option. If focus is on the last option, moves focus to the first option.
Up Arrow	Moves visual focus to the previous option. If focus is on the first option, moves focus to the last option.
Right Arrow	Moves focus to the textbox and moves the editing cursor one character to the right.
Left Arrow	Moves focus to the textbox and moves the editing cursor one character to the left.
Home	Moves focus to the textbox and places the editing cursor at the beginning of the field.
End	Moves focus to the textbox and places the editing cursor at the end of the field.

Keyboard Interactions

Key	Description
Spacebar	Toggles current highlighted option.
Enter	Toggles current highlighted option, closes listbox, sets focus on Selection Button.
Esc	Closes listbox, sets focus on Selection Button.
Down Arrow	Moves focus to the next option.
Up Arrow	Moves focus to the previous option.
Home	Moves focus to the first option.
End	Moves focus to the last option.

Keyboard Interactions

Key	Description
Enter	Toggles the currently highlighted checkbox.
Esc	Closes the menu.
Down Arrow	Moves visual focus to the next option.
Up Arrow	Moves visual focus to the previous option.
Home	Moves visual focus to the first option.
End	Moves visual focus to the last option.

Known BrAT (Screen Reader) Issues

• VoiceOver (MacOS) does not correctly announce combobox/listbox status
  • When expanded, combobox operation does not announce listbox selection or status
  • These issues match those in WAI-ARIA Editable Combobox without Autocomplete Exampleopens in a new window
• Un-searchable variant
  • Unlike searchable variant, NVDA does not announce "not selected" when options receive keyboard focus
  • JAWS correctly announced "not selected" for both variants

Component Tokens

Tip

Click on the token row to copy the token to your clipboard.

SelectInput Tokens

Search tokens

Token Name	Value
select-input.color.border.menu	#CBCCCD
select-input.color.surface.menu	#FFFFFF
select-input.color.icon.search	#323334
select-input.border-radius.all.menu	4px
select-input.border-width.all.menu	1px
select-input.spacing.gap.horizontal.text	4px
select-input.spacing.padding.horizontal.search-wrapper	16px
select-input.spacing.padding.horizontal.search-field	12px
select-input.spacing.padding.horizontal.menu.loading	16px
select-input.spacing.padding.vertical.search-wrapper	8px
select-input.spacing.padding.top.menu.loading	16px
select-input.spacing.padding.bottom.menu.loading	24px
select-input.spacing.padding.all.menu.no-results	16px
select-input.elevation.menu	0px 2px 4px -2px rgba(0,0,0,0.16)

Input Tokens

Search tokens

Token Name	Value
input.color.surface.field.default	#FFFFFF
input.color.surface.field.highlighted	#E5F8FB
input.color.surface.field.disabled	#F3F3F3
input.color.border.field.rest	#4B4D4F
input.color.border.field.hover.default	#196ECF
input.color.border.field.hover.error	#990000
input.color.border.field.hover.success	#007000
input.color.border.field.active.default	#004BA0
input.color.border.field.active.error	#990000
input.color.border.field.active.success	#007000
input.color.text.input	#4B4D4F
input.color.text.hint	#4B4D4F
input.color.text.required	#990000
input.color.icon.utility.rest	#4B4D4F
input.color.icon.utility.hover	#323334
input.color.icon.utility.active	#000000
input.color.icon.content	#323334
input.color.cursor	#196ECF
input.border-radius.all.field	4px
input.border-width.all.field.default	1px
input.border-width.all.field.active	3px
input.sizing.all.icon	20px
input.spacing.gap.vertical.container	8px
input.spacing.gap.horizontal.field	12px
input.spacing.gap.horizontal.input-indicator	2px
input.spacing.gap.horizontal.prefix-input	2px
input.spacing.gap.horizontal.suffix-clear	2px
input.spacing.padding.all.focus-container	2px
input.spacing.padding.horizontal.field	12px
input.spacing.padding.left.field	12px
input.spacing.padding.right.focus-field	44px

Header Tokens

Search tokens

Token Name	Value
input-header.color.text.label	#4B4D4F
input-header.color.text.hint	#4B4D4F
input-header.color.icon.info.rest	#196ECF
input-header.color.icon.info.hover	#004BA0
input-header.color.icon.info.active	#002677
input-header.sizing.all.icon	24px
input-header.spacing.gap.horizontal.container	4px
input-header.spacing.gap.horizontal.label	4px
input-header.spacing.gap.vertical.content	4px
input-header.spacing.padding.top.content	2px

Validation Tokens

Search tokens

Token Name	Value
input-validation.color.surface.container	#FFFFFF
input-validation.color.text.error	#990000
input-validation.color.text.success	#007000
input-validation.color.icon.error	#990000
input-validation.color.icon.success	#007000
input-validation.sizing.all.icon	20px
input-validation.spacing.gap.horizontal.container	4px

SelectionOption Tokens

Search tokens

Token Name	Value
selection-option.color.icon	#323334
selection-option.color.surface.container.default.active	#E5E5E6
selection-option.color.surface.container.default.hover	#F3F3F3
selection-option.color.surface.container.default.rest	#FFFFFF
selection-option.color.surface.container.selected.active	#D9E9FA
selection-option.color.surface.container.selected.hover	#E3EEFA
selection-option.color.surface.container.selected.rest	#EDF3FB
selection-option.color.surface.container.heading	#F3F3F3
selection-option.color.text.default	#4B4D4F
selection-option.color.text.disabled	#7D7F81
selection-option.color.text.heading	#323334
selection-option.sizing.all.icon	20px
selection-option.spacing.gap.horizontal.container	8px
selection-option.spacing.padding.horizontal.container	16px
selection-option.spacing.padding.vertical.container	8px
selection-option.spacing.padding.left.container	24px
selection-option.spacing.padding.right.container	16px

Checkbox Tokens

Search tokens

Token Name	Value
checkbox.color.surface.control.enabled.default.rest	#FFFFFF
checkbox.color.surface.control.enabled.default.hover	#FFFFFF
checkbox.color.surface.control.enabled.default.active	#FFFFFF
checkbox.color.surface.control.enabled.selected.rest	#196ECF
checkbox.color.surface.control.enabled.selected.hover	#004BA0
checkbox.color.surface.control.enabled.selected.active	#002677
checkbox.color.surface.control.disabled.default	#CBCCCD
checkbox.color.surface.control.disabled.selected	#7D7F81
checkbox.color.border.control.enabled.default.rest	#7D7F81
checkbox.color.border.control.enabled.default.hover	#4B4D4F
checkbox.color.border.control.enabled.default.active	#323334
checkbox.color.border.control.disabled.default	#7D7F81
checkbox.color.text.label	#4B4D4F
checkbox.color.icon	#FFFFFF
checkbox.border-radius.all.control	4px
checkbox.border-width.all.control	2px
checkbox.sizing.all.icon	20px
checkbox.spacing.gap.vertical.container	8px
checkbox.spacing.gap.horizontal.control-label-container	8px