Checkbox Group
Checkboxes sharing one value.
Anatomy
A Checkbox Group wraps a set of Checkbox parts. Import both and nest the checkboxes inside the group:
<script setup>
import { Checkbox } from '@shardsui/vue/checkbox'
import { CheckboxGroup } from '@shardsui/vue/checkbox-group'
</script>
<template>
<CheckboxGroup>
<Checkbox.Root />
</CheckboxGroup>
</template>Usage guidelines
- Form controls must have an accessible name: name them with
<label>elements, or with theFieldandFieldsetcomponents.
Examples
Labeling a checkbox group
Point the group at a sibling label with aria-labelledby:
<template>
<div id="protocols-label">Allowed network protocols</div>
<CheckboxGroup aria-labelledby="protocols-label">
<!-- checkboxes -->
</CheckboxGroup>
</template>For the individual checkboxes, the simplest option is to wrap each one in a <label>:
<template>
<label>
<Checkbox.Root value="http" />
HTTP
</label>
</template>Rendering as a native button
Checkbox.Root renders a <span> by default so it can live inside a <label>. When each checkbox has its own label tied to it with for/id, render it as a native button with as="button":
<template>
<div id="protocols-label">Allowed network protocols</div>
<CheckboxGroup aria-labelledby="protocols-label">
<div>
<label for="protocol-http">HTTP</label>
<Checkbox.Root id="protocol-http" value="http" as="button">
<Checkbox.Indicator />
</Checkbox.Root>
</div>
</CheckboxGroup>
</template>Form integration
Combine Field and Fieldset to label the group and hook it into a form:
<template>
<Field.Root name="allowedNetworkProtocols">
<Fieldset.Root>
<Fieldset.Legend>Allowed network protocols</Fieldset.Legend>
<CheckboxGroup>
<label>
<Checkbox.Root value="http" />
HTTP
</label>
<label>
<Checkbox.Root value="https" />
HTTPS
</label>
<label>
<Checkbox.Root value="ssh" />
SSH
</label>
</CheckboxGroup>
</Fieldset.Root>
</Field.Root>
</template>