Skip to main content
xoji

Checkbox
Info:Controls html svelte astro Success: coverage 63/63

A styled native checkbox: checked, indeterminate, and disabled states.

Live demo

live · @xoji/astro

Checkbox

Group selection (tri-state roll-up)

The heading owns the group: toggling it checks or clears every item, and the heading shows checked when all are on, indeterminate when some are, off when none. It's automatic — toggle any item and watch the heading follow.

States

Sizes

sm

md

Every tone

Accents

Statuses

Named hues

Checkbox stages a single boolean value: unlike a switch it doesn't apply on toggle, contributing its value to an enclosing form only on submit. It styles a native <input type="checkbox"> with appearance: none and overlays a custom indicator, so it keeps every native affordance (keyboard activation, form participation, label association) while looking the part.

Beyond the on/off pair it carries a third visual state, indeterminate, for the classic select-all / partial-selection pattern; the indicator switches from a check mark to a dash, and any user interaction clears it. Two sizes, sm and md, cover compact and default density.

When to use

How this component composes with the rest of the set.

Pair with Field to give a checkbox a description, hint, or error message in a form layout.
Wrap items in a CheckboxGroup for a select-all heading that tri-states over them automatically (all → checked, some → indeterminate, none → off); pass manual to keep the heading but drive its state yourself.
For a one-of-many choice use a radio group instead; checkbox is for independent booleans.

Props

9 props, straight from the manifest.

PropTypeDefaultBindingsDescription
checked boolean false
html svelte astro
Whether the box is checked. Two-way bindable in Svelte.
indeterminate boolean false
html svelte astro
Third visual state (a dash) for partial selection. Cleared on any user toggle.
disabled boolean false
html svelte astro
Disables interaction and dims the control.
size Size
sm md
md
html svelte astro
Control size. Only `sm` and `md` are meaningful for a checkbox.
tone FullTone
accent neutral danger success warn info accent-2 accent-3 accent-4 red orange yellow green blue purple brown pink cyan gray white black
accent
html svelte astro
Color of the checked and indeterminate fill. Any semantic role, accent variant, or named hue.
name string —
html svelte astro
Form field name submitted with the enclosing form when checked.
value string on
html svelte astro
Value contributed to the form when checked.
label string —
html svelte astro
Accessible name when no visible label text is slotted.
labelledby string —
html svelte astro
ID of an external element naming the checkbox (sets `aria-labelledby`).

Appearance

Sizes

sm
.xoji-checkbox--sm

Compact.

md

 default
.xoji-checkbox

Default.

States

checked

 .xoji-checkbox__control:checked

Box filled with the chosen tone (accent by default), check mark shown.

indeterminate

 .xoji-checkbox--indeterminate .xoji-checkbox__control

Box filled, dash shown instead of the check mark.

focus-visible

 .xoji-checkbox__control:focus-visible

Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.

disabled

 .xoji-checkbox__control:disabled, .xoji-checkbox__control[aria-disabled="true"]

Non-interactive: muted fill, border, and ink.

Anatomy

The named parts that make up the component, with their selectors.

checkbox

 .xoji-checkbox

The label root wrapping the control and text, so a click anywhere toggles the box.
--font-sans --text-body --leading-normal --fg-0 --space-2 --space-5

control

 .xoji-checkbox__control

The native checkbox input, stripped of its default look and redrawn as the box.
--field-bg --field-border --border-thin --radius-sm --accent --duration-fast --ease-standard

indicator

 .xoji-checkbox__indicator

The overlaid check / dash glyph, drawn in the fill's foreground ink.
--accent-fg

label

 .xoji-checkbox__label

The text content wrapper beside the box.

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 63/63 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent --accent-2 --accent-2-fg --accent-3 --accent-3-fg --accent-4 --accent-4-fg --accent-fg --black --black-fg --blue --blue-fg --border-normal --border-thin --brown --brown-fg --cyan --cyan-fg --danger --danger-fg --duration-fast --ease-standard --fg-0 --fg-disabled --field-bg --field-border --font-sans --gray --gray-fg --green --green-fg --info --info-fg --leading-normal --neutral --neutral-fg --orange --orange-fg --pink --pink-fg --purple --purple-fg --radius-sm --red --red-fg --ring --space-1 --space-2 --space-4 --space-5 --space-6 --state-disabled --success --success-fg --text-body --text-sm --warn --warn-fg --weight-semibold --white --white-fg --yellow --yellow-fg

Slots
default
html svelte astro

The visible label text beside the box.

Accessibility
Wraps a native <input type="checkbox"> inside a <label>, so keyboard toggling, focus, and label association come for free.
indeterminate is a presentation-only state on the native input; the box reports checked/unchecked to assistive tech, never a mixed value.
With no slotted text the checkbox REQUIRES a label or labelledby; the binding warns at runtime when no accessible name is found.
Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.
The check / dash glyph is decorative (aria-hidden); state is conveyed by the native input, not the SVG.

Code

States

Unchecked, checked, indeterminate, and a disabled compact checkbox.

 
<xoji-checkbox name="terms" value="accepted">I accept the terms</xoji-checkbox>

<xoji-checkbox checked>Subscribe to the newsletter</xoji-checkbox>

<xoji-checkbox indeterminate>Select all</xoji-checkbox>

<xoji-checkbox size="sm" disabled>Unavailable option</xoji-checkbox>
 
<script lang="ts">
	import { Checkbox } from "@xoji/svelte";

	let accepted = $state(false);
	let all = $state(false);
	let partial = $state(true);
</script>

<Checkbox bind:checked={accepted} name="terms" value="accepted">I accept the terms</Checkbox>

<Checkbox bind:checked={all} bind:indeterminate={partial}>Select all</Checkbox>

<Checkbox size="sm" disabled>Unavailable option</Checkbox>
 
---
import { Checkbox } from "@xoji/astro";
---

<Checkbox name="terms" value="accepted">I accept the terms</Checkbox>

<Checkbox checked>Subscribe to the newsletter</Checkbox>

<Checkbox indeterminate>Select all</Checkbox>

<Checkbox size="sm" disabled>Unavailable option</Checkbox>

Group selection

A CheckboxGroup with a tri-state select-all heading that rolls up its items automatically.

 
<xoji-checkbox-group label="Notifications">
  <xoji-checkbox checked>Mentions</xoji-checkbox>
  <xoji-checkbox>Replies</xoji-checkbox>
  <xoji-checkbox checked>Direct messages</xoji-checkbox>
</xoji-checkbox-group>
 
<script lang="ts">
	import { CheckboxGroup, Checkbox } from "@xoji/svelte";
</script>

<CheckboxGroup label="Notifications">
	<Checkbox checked>Mentions</Checkbox>
	<Checkbox>Replies</Checkbox>
	<Checkbox checked>Direct messages</Checkbox>
</CheckboxGroup>
 
---
import { CheckboxGroup, Checkbox } from "@xoji/astro";
---

<CheckboxGroup label="Notifications">
	<Checkbox checked>Mentions</Checkbox>
	<Checkbox>Replies</Checkbox>
	<Checkbox checked>Direct messages</Checkbox>
</CheckboxGroup>