Usage

CheckboxList is a field around a list of CheckboxListItem rows. With v-model, the value is the array of checked item values.

<script setup lang="ts">
import { CheckboxList, CheckboxListItem } from '@astryx-vue/core/CheckboxList'
import { shallowRef } from 'vue'

const selected = shallowRef(['email'])
</script>

<template>
  <CheckboxList v-model="selected" label="Notifications">
    <CheckboxListItem label="Email" value="email" />
    <CheckboxListItem label="SMS" value="sms" />
  </CheckboxList>
</template>

Omit the bound value when a row owns its own checked state, such as a select-all row. Compact density uses the small checkbox. A checked row uses the accent-muted background. Read-only and disabled rows drop that background.

A read-only group keeps the checks and does not dim, but the checks cannot change. Disabled wins when both are set. When the group is disabled and a reason is set, every row stays focusable, and hovering or keyboard focus shows the reason. A row that is loading, or whose change is still running, shows a spinner inside the checkbox and cannot be toggled.

Anatomy

Element	Description
Group	Container for the labeled checkbox group.
Group label	Text identifying what the checkbox options represent.
Description	Helper text below the group label.
Options list	List containing the available checkbox options.
Option row	Selectable row containing one option.
Checkbox	Selection indicator for an option.
Option label	Primary content identifying an option.
Option description	Secondary text below an option label.
End content	Caller-provided content at the end of an option row.
Spinner	Loading indicator shown inside the pending checkbox.
Status message	Error, warning, or success message below the group.

Best practices

Guideline	Practice
Do	Use a select-all row without a value when the list itself is not the collection.
Don't	Use a checkbox list for mutually exclusive choices. Use RadioList.

Examples

Select all

Include in export

• Select all
  Select all
• Transaction history
  Transaction history
• Account statements
  Account statements
• Tax documents
  Tax documents
• Invoices
  Invoices

Select all is indeterminate until every document is included.

With end content

Add-on packages

• Free tier
  Free tierBasic features included $0/mo
• Pro tier
  Pro tierAdvanced analytics and integrations $9/mo
• Enterprise
  EnterpriseCustom solutions and dedicated support Custom

Each row can end with a price badge.

Read-only, reason, and loading

Saved export

• CSV
  CSV
• JSON
  JSON

Managed export

• CSV

  Ask an administrator
  CSV
• JSON

  Ask an administrator
  JSON

Ask an administrator

Live export

• CSV

  Loading
  CSV
• JSON
  JSON

Read-only keeps the checks and does not dim. A disabled group with a reason stays focusable. A loading row cannot be toggled.