[component]
Dev Mode
Multiselect Field
Description
Also called ‘checkbox field’. This component is a list of checkable items. In this case, a user can choose one, many, all, or no options.
Multiselect Field
Option 1
Option 2
Option 3
Variant
Usage Guidelines
Do
When inputs within a broader form are closely related and would benefit from a shared legend.
When the user can choose one, many, or no options.
Don't
When the fields are unrelated.
Accessibility
Screen readers should know when a set of checkboxes is related.
When a user clicks the checkbox label, they should be able to interact with the checkbox. Learn more about that here.
Props
Name
Type
Required
Description
onChange
Required
The function to call when the selected values change.
options
Required
The available options for the multiselect field.
title
string
Required
The title of the multiselect field.
value
Required
The selected values of the multiselect field.
disabled
boolean
The disabled state of multiselect. Removes checkboxes and only shows the values.
errorText
string
helperText
string
testID
string
Root test id for the primary interactive element or container.
testIDs
FieldTestIDs
variant
The variant of the multiselect field, which determines the position of the text.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Related
Checkbox microcomponent
Examples
Variants
Default - Variant "leftText"
Option 1
Option 2
Option 3
Variant "rightText"
Option 1
Option 2
Option 3
Disabled State
Option 1, Option 2