Checkbox list
A multiple selection input.
Props
name
string
The name for the checkbox list group. Used as group identifier in change events.
disabled
boolean
Disables all checkboxes in the list.
error
boolean
Shows an error state on all checkboxes in the list.
maxWidth
string
Sets the maximum width of the checkbox list container.
size
"default" | "compact"
Sets the size of the checkbox list. 'compact' reduces spacing between items.
Defaults to
default.
testId
string
Sets a data-testid attribute for automated testing.
value
string[]
Array of currently selected checkbox values.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onBlur
(detail: GoabCheckboxListOnBlurDetail) => void
Callback fired when focus leaves all checkboxes in the list.
onChange
(detail: GoabCheckboxListOnChangeDetail) => void
Callback fired when the selected values change.
onFocus
(detail: GoabCheckboxListOnFocusDetail) => void
Callback fired when focus enters any checkbox in the list.
Content
Tip
Use the description prop to add context on complex options where the label alone isn't enough.
Other
The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.
Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
