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] = React.useState(['alpine']);

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

  return (
    <React.Fragment>
      <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': {
            marginTop: '$web.semantic.spacing.scale.md',
          },
        }}>
        Submit
      </Button>
    </React.Fragment>
  );
};

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.

Note: 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.js 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 documentation and passing the configurations into the searchConfig prop.

For example, if you wanted to adjust the threshold 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 documentation.

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 estimateSize 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	Description
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	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	-	-	Custom messaging for when no options are available
customRender	(item: SelectionMenuOption | SelectionMenuSection, itemState: import("/Users/ogillman/abyss/packages/abyss-web/src/ui/SelectionMenu/S...	-	-	A custom render function for rendering each option
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	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	false	-	Enable outside scroll when the select input is open.
errorMessage	string | never	-	-	Error message to display for the input. Only used when not in a FormProvider. errorMessage should not exist in useForm mode.
helper	React.ReactNode	-	-	Helper element next to label
hideLabel	boolean	false	-	If true, the label will be visually hidden
highlighted	boolean	false	-	If true, the input field will be highlighted
highlightMatches	boolean | { fuzzyHighlighting?: boolean | undefined; colorHighlighting?: boolean | undefined; }	true	-	Determines if the search matches should be highlighted. Can be a boolean or an object with advanced highlighting options.
inputLeftElement	{ element: React.ReactNode; description?: string | undefined; }	-	-	Content to be displayed as a left element within the input (typically a IconSymbol)
isClearable	boolean	-	-	If true, the input will display a clear button
isDisabled	boolean	false	-	If true, the input will be disabled
isLoading	boolean	false	-	Whether the input is loading.
isMulti	boolean	false	-	Whether the input allows multiple selections.
isRequired	boolean | never	-	-	Whether the input is required. Only used when not in a FormProvider. isRequired should not exist in useForm mode.
isSearchable	boolean	false	-	Whether the input is searchable.
label	string	-		The label for the input
labelKey	string	'label'	-	Key for the label in the options.
maxListHeight	string | number	'200px'	-	Maximum height for the list.
model	never | string	-	-	model should not exist in useState mode. Model name for form validation. Only used when in a FormProvider.
onBlur	React.FocusEventHandler<HTMLInputElement>	-	-	Callback function executed when the input is blurred
onChange	(value: Function | string[] | number[], selectedOptions: Record<string, any>[]) => void | (value: string | number | Function, selectedOption: Record<string, any>) => void	-	-	Callback fired every time the selection value changes
onClear	() => void	-	-	Callback function executed when the input is cleared
onFocus	React.FocusEventHandler<HTMLInputElement>	-	-	Callback function executed when the input is focused
onInputChange	(inputValue: string, selection: string | number | string[] | number[] | undefined) => void	-	-	Callback fired when the input value changes
onOpenChange	(isOpen: boolean) => void	-	-	Callback fired when the dropdown menu opens or closes
options	(SelectionMenuOption | SelectionMenuSection)[]	-	-	Options for the select input.
searchConfig	false | SearchConfig	-	-	Configuration for the search. When set to false, disables internal filtering.
selectAll	boolean	-	-	Whether to select all options.
subText	string | { text: string; position: SubTextPosition; }	-	-	Additional descriptive text for the input
successMessage	string	-	-	Success message to display for the input
validationBelowMenu	boolean	false	-	Displays error and success validation messages below the menu.
validators	never | RegisterOptions	-	-	validators should not exist in useState mode. Validators for the input. Only used when in a FormProvider.
value	string[] | number[] | string | number	-	-	Selection option value or list of option values Selected option value
valueKey	string	'value'	-	Key for the value in the options.
virtual	boolean | VirtualConfig	-	-	Adds virtualization to option item drop-down list. Can be a boolean or object with additional virtual scrolling configurations.
width	string | number	'100%'	-	Width of the input.

SelectInput Classes

Class Name	Description
.abyss-select-input-root	SelectInput root element
.abyss-select-input-wrapper	Wrapper for all non-portal/menu elements
.abyss-select-input-label	SelectInput label
.abyss-select-input-container-wrapper	Wrapper for selection container interior elements
.abyss-select-input-container	Primary container for the SelectInput
.abyss-select-input-left-element	SelectInput left element
.abyss-select-input-clear-button	Button to clear selection
.abyss-select-input-menu-expand-icon-container	Container for the dropdown expand icon
.abyss-select-input-menu-expand-icon	Icon for expanding/collapsing the dropdown menu
.abyss-select-input-descriptors	Descriptors for SelectInput (error/success)
.abyss-select-input-portal-container	Portal container for dropdown menu
.abyss-select-input-dismissable-layer	Dismissable layer for dropdown menu
.abyss-select-input-menu-container	Container for the dropdown menu
.abyss-select-input-menu-top-container	Container for loading spinner in dropdown menu
.abyss-select-input-menu-no-options-content	Content shown when no options are available
.abyss-select-input-menu-loading-spinner	Loading spinner in dropdown menu
.abyss-select-input-sub-text	Subtext element
.abyss-select-input-menu-virtual-wrapper	Wrapper for virtualized menu items
.abyss-select-input-menu-option-list-container	Container for all options in dropdown menu
.abyss-select-input-menu-section-list	List of section options in dropdown menu
.abyss-select-input-menu-option-heading	Section heading in dropdown menu
.abyss-select-input-menu-option	Individual selectable option in dropdown menu
.abyss-select-input-menu-option-checkbox	Checkbox for individual selectable option in dropdown menu
.abyss-select-input-menu-option-check-icon	Check icon for individual selectable option in dropdown menu
.abyss-select-input-menu-option-label	SelectInput menu option label content
.abyss-select-input-selection-container	Container for selected items
.abyss-select-input-selection-count	Count indicator for selected items in multi-select
.abyss-select-input-selections	List of selected item(s)
.abyss-select-input-menu-search-wrapper	Wrapper for search input in menu
.abyss-select-input-menu-search-input-wrapper	Wrapper for search input field in menu
.abyss-select-input-menu-search-input-icon-wrapper	Wrapper for search icon in search input field in menu
.abyss-select-input-menu-search-input	Search input field in menu
.abyss-text-input-clear	Search input field in menu clear button

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 pattern.

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 Example.

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.

Selection Box 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.

Closed Selection Box Keyboard Interactions

Key	Description
Enter	Opens the listbox and moves focus to the selected option in the listbox. If no option is selected it sets focus to the first option in the listbox
Down Arrow	Opens the listbox and moves focus to the selected option in the listbox. If no option is selected it sets focus to the first option in the listbox
Up Arrow	Opens the listbox and moves focus to the selected option in the listbox. If no option is selected it sets focus to the last option in the listbox

Search Textbox Keyboard Interactions

Key	Description
Down Arrow	Moves visual focus to the first value in the listbox
Up Arrow	Moves visual focus to the last value in the listbox.
Esc	Closes the menu.
Home	Places the editing cursor at the beginning of the field.
End	Places the editing cursor at the end of the field.

Listbox (if isSearchable) Keyboard Interactions

Key	Description
Enter	Toggles the currently highlighted checkbox. Closes the listbox. Sets focus on the selection container.
Esc	Closes the listbox. Sets focus on the selection container.
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.

Listbox Keyboard Interactions

Key	Description
Enter	Toggles the currently highlighted checkbox. Closes the listbox. Sets focus on the selection container.
Esc	Closes the listbox. Sets focus on the selection container.
Down Arrow	Moves focus to the next option.
Up Arrow	Moves focus to the previous option.
Home	Moves focus to the first option in the listbox.
End	Moves focus to the last option in the listbox.

Listbox 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 Example
• 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

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

Search tokens

SelectInput 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)

Search tokens

Input 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.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

Search tokens

Header 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

Search tokens

Validation 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

Search tokens

SelectionOption 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

Search tokens

Checkbox 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