# Checkbox with label

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.checkbox-with-label.overview"
  source="components/dist/registries/dskit.json#checkbox-with-label"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"checkbox-with-label"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="medium" field="variants" value="medium" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="high" field="content" value="high" />
</div>

<MediaAsset src="/media/checkbox-with-label/preview.png" alt="" />

## Overview

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Label","description":"caller-supplied text bound to the control via for/aria-labelledby"},{"name":"Required indicator","description":"visible asterisk; aria-required carries the semantics"},{"name":"Control","description":"the input/select/checkbox/radio/toggle element"},{"name":"Helper text","description":"optional persistent guidance below the control"},{"name":"Validation message","description":"error/warning/success; replaces helper text when active"},{"name":"Leading icon (optional)","description":"decorative or semantic hint inside the control"},{"name":"Trailing icon (optional)","description":"often interactive — clear, reveal, dropdown caret"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"Selected","values":["Yes","Indeterminate","No"]},{"axis":"State","values":["Default","Hover","Focus","Pressed","Disabled"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"state-transitions","note":"focus-ring fade-in on focus; opacity transition on disabled"},"pattern":{"slug":"state-transitions","name":"State Transitions","phases":[{"State":"Hover","Duration":"duration-instant","Easing":"ease-standard","Behavior":"Subtle background color shift via brightness filter"},{"State":"Focus","Duration":"—","Easing":"—","Behavior":"No motion tokens — instant high-contrast ring/border for accessibility and speed"},{"State":"Pressed","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Subtle scale or brightness darkening"},{"State":"→ Selected","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Subtle background color shift and side stroke draw-in"},{"State":"→ Unselected","Duration":"duration-instant","Easing":"ease-exit","Behavior":"Rapid fade and stroke collapse"}]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=9478-17216)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/checkbox-with-label)