Several answers from a set that is all on screen.
Import it from rei-kit:
import { BaseCheckboxGroup } from 'rei-kit'
Open BaseCheckboxGroup in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseCheckboxGroup } from 'rei-kit'
const days = ref(['mon', 'thu'])
const weekdays = [
{ value: 'mon', label: 'Monday' },
{ value: 'tue', label: 'Tuesday' },
{ value: 'wed', label: 'Wednesday' },
{ value: 'thu', label: 'Thursday' },
{ value: 'fri', label: 'Friday', hint: 'Busiest day' },
]
</script>
<template>
<BaseCheckboxGroup
v-model="days"
legend="Remind me on"
:options="weekdays"
select-all-label="Every weekday"
:columns="2"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
options | readonly CheckboxOption<V>[] | yes | |
legend | string | yes | |
error | string | '' | Shown under the group, and it marks every box invalid. |
hint | string | '' | |
legendHidden | boolean | false | Hides the question but keeps it as the group's accessible name — for a group whose surroundings already ask it. Dropping the legend instead leaves the set named nothing at all. |
selectAllLabel | string | '' | Adds a box above the others that chooses or clears all of them, named by this string. Empty means no such box: it earns its place on a list long enough that ticking each one is work, and gets in the way on three. It never chooses a disabled option, so pressing it twice is not a way to select something the form has ruled out. |
disabled | boolean | false | Disables every box, including the select-all. |
columns | 1 | 2 | 1 | Lay the boxes out in two columns from the `sm` breakpoint. One column on a phone either way: a two-column list of checkboxes on a 390px screen is two columns of truncated labels. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.