Checkbox list
A multiple selection input.
Props
name
string
- Manages a selected values array and synchronizes state down to child checkboxes. - Relays form-related events (mount, set value, set/reset error, reset fields) to and from children. Approach - Children register themselves via a FormFieldMount event; we track them in _childRecords. - All value and error changes flow through a small relay bus (receive/relay helpers). - Support both slotted goa-checkbox elements and direct child component instances. / import { onMount, tick } from "svelte"; import type { Spacing } from "../../common/styling"; import { calculateMargin } from "../../common/styling"; import { receive, relay, toBoolean } from "../../common/utils"; import { FieldsetSetValueMsg, FieldsetSetValueRelayDetail, FieldsetSetErrorMsg, FieldsetResetErrorsMsg, FormFieldMountRelayDetail, FormFieldMountMsg, FieldsetResetFieldsMsg, FieldsetErrorRelayDetail, } from "../../types/relay-types"; /** The name for the checkbox list group. Used for form submission.
value
string[]
Array of currently selected checkbox values.
Defaults to
[].
disabled
boolean
Disables all checkboxes in the list.
Defaults to
false.
error
boolean
Shows an error state on all checkboxes in the list.
Defaults to
false.
testId
string
Sets a data-testid attribute for automated testing.
maxWidth
string
Sets the maximum width of the checkbox list container.
Defaults to
none.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Events
onChange
(event: Event) => void
_change
CustomEvent
Add and edit lots of filters
const [open, setOpen] = useState(false);<GoabButton onClick={() => setOpen(true)}>Filters</GoabButton>
<GoabDrawer
heading="Filters"
open={open}
onClose={() => setOpen(false)}
position="right"
actions={
<GoabButtonGroup>
<GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
Apply filters
</GoabButton>
<GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
Cancel
</GoabButton>
</GoabButtonGroup>
}
>
<GoabFormItem label="Entry status">
<GoabCheckboxList name="entryStatus" onChange={() => {}}>
<GoabCheckbox name="draft" text="Draft" value="draft" />
<GoabCheckbox name="published" text="Published" value="published" />
</GoabCheckboxList>
</GoabFormItem>
<GoabFormItem label="Assigned to - Region" mt="l">
<GoabCheckboxList name="region" onChange={() => {}}>
<GoabCheckbox name="calgary" text="Calgary" value="calgary" />
<GoabCheckbox name="central" text="Central" value="central" />
<GoabCheckbox name="edmonton" text="Edmonton" value="edmonton" />
<GoabCheckbox name="north" text="North" value="north" />
<GoabCheckbox name="south" text="South" value="south" />
</GoabCheckboxList>
</GoabFormItem>
<GoabFormItem label="Assigned to" mt="l">
<GoabDropdown name="assignedTo" onChange={() => {}}>
<GoabDropdownItem value="1" label="Person 1" />
<GoabDropdownItem value="2" label="Person 2" />
</GoabDropdown>
</GoabFormItem>
<GoabFormItem label="Date taken" mt="l">
<GoabRadioGroup name="dateTaken" onChange={() => {}}>
<GoabRadioItem value="24" label="Last 24 hours" />
<GoabRadioItem value="72" label="Last 72 hours" />
</GoabRadioGroup>
</GoabFormItem>
</GoabDrawer>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.