Checkbox List
@astryxdesign/core v0.7.1 · CheckboxList
CheckboxList Props
| Name | Type | Default | Description |
|---|---|---|---|
v-model | string[] | — | Checked values. Omit it for standalone rows. |
label | string | — | Required accessible name of the group. |
description | string | — | Help text under the label. |
density | 'compact' | 'balanced' | 'spacious' | 'balanced' | Row padding. Compact uses a small checkbox. |
hasDividers | boolean | false | Draws a divider between rows. |
status | FieldStatusInput | — | Error, warning, or success. |
statusVariant | 'attached' | 'detached' | 'tooltip' | 'detached' | Where the status message sits. |
isDisabled | boolean | false | Disables every row. |
disabledMessage | string | — | 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. |
isReadOnly | boolean | false | Read-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. |
containerClass | string | — | Class on the field shell. It has no effect inside a horizontal-labels form. |
containerStyle | StyleValue | — | Inline style on the field shell. Same placement as containerClass. |
controlClass | string | — | Class on the option group (role="group"). It does not land on each checkbox. |
controlStyle | StyleValue | — | Inline style on the option group. |
CheckboxListItem Props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | — | 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. |
ariaLabel | string | — | Overrides the checkbox name. Use it when a rich label has no readable text. |
value | string | — | Required in collection mode. Omit it for a standalone row. |
description | string | — | Secondary text, also the checkbox description. Rich content goes in the description slot and stays linked with aria-describedby. |
isChecked | boolean | 'indeterminate' | — | Standalone checked state. Ignored in collection mode. |
isDisabled | boolean | false | Disables this row. |
isLoading | boolean | false | Loading 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.