Skip to content

Checkbox List

@astryxdesign/core v0.7.1 · CheckboxList

CheckboxList Props ​

NameTypeDefaultDescription
v-modelstring[]—Checked values. Omit it for standalone rows.
labelstring—Required accessible name of the group.
descriptionstring—Help text under the label.
density'compact' | 'balanced' | 'spacious''balanced'Row padding. Compact uses a small checkbox.
hasDividersbooleanfalseDraws a divider between rows.
statusFieldStatusInput—Error, warning, or success.
statusVariant'attached' | 'detached' | 'tooltip''detached'Where the status message sits.
isDisabledbooleanfalseDisables every row.
disabledMessagestring—Why the whole group is disabled. With isDisabled, the message shows in a tooltip on hover or keyboard focus and every row stays focusable with aria-disabled. The older disabledReason name works too.
isReadOnlybooleanfalseRead-only group. Checks stay and do not dim, but cannot change. Disabled wins when both are set.
changeAction(values) => void | Promise<void>—Runs after a check changes. The row shows a spinner and cannot be toggled until it finishes.
containerClassstring—Class on the field shell. It has no effect inside a horizontal-labels form.
containerStyleStyleValue—Inline style on the field shell. Same placement as containerClass.
controlClassstring—Class on the option group (role="group"). It does not land on each checkbox.
controlStyleStyleValue—Inline style on the option group.

CheckboxListItem Props ​

NameTypeDefaultDescription
labelstring—Required row label. It names the checkbox. Use the label slot for rich content such as a link; the checkbox name comes from the visible text.
ariaLabelstring—Overrides the checkbox name. Use it when a rich label has no readable text.
valuestring—Required in collection mode. Omit it for a standalone row.
descriptionstring—Secondary text, also the checkbox description. Rich content goes in the description slot and stays linked with aria-describedby.
isCheckedboolean | 'indeterminate'—Standalone checked state. Ignored in collection mode.
isDisabledbooleanfalseDisables this row.
isLoadingbooleanfalseLoading for this row. The checkbox shows a spinner and cannot be toggled.

CheckboxListItem events and slots ​

check emits the next boolean for a standalone row. The label and description slots accept rich content. The end slot renders after the label.