xtyle · Components

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.

Prop	Type	Default	Bindings	Description
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`).

Events

What the component emits, and what rides along on event.detail. The name in the first column is the one addEventListener takes.

Event	Detail	Bindings	Description
change	{ checked, indeterminate, value }	html svelte astro	The checked state changed, including into and out of indeterminate.

Appearance

Sizes

sm

.xtyle-checkbox--sm

Compact.

md

default

.xtyle-checkbox

Default.

States

checked

.xtyle-checkbox__control:checked

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

indeterminate

.xtyle-checkbox--indeterminate .xtyle-checkbox__control

Box filled, dash shown instead of the check mark.

focus-visible

.xtyle-checkbox__control:focus-visible

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

disabled

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

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

Anatomy

The named parts that make up the component. A ::part() handle is reachable from your own stylesheet; the class beside it is the component's internal selector, which a shadow boundary keeps to itself.

checkbox

Success:::part(checkbox)

.xtyle-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

Success:::part(control)

.xtyle-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

Success:::part(indicator)

.xtyle-checkbox__indicator

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

--accent-fg

label

Success:::part(label)

.xtyle-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: 310 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { 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.

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

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

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

<xtyle-checkbox size="sm" disabled>Unavailable option</xtyle-checkbox>

<script lang="ts">
	import { Checkbox } from "@xtyle/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 "@xtyle/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.

<xtyle-checkbox-group label="Notifications">
  <xtyle-checkbox checked>Mentions</xtyle-checkbox>
  <xtyle-checkbox>Replies</xtyle-checkbox>
  <xtyle-checkbox checked>Direct messages</xtyle-checkbox>
</xtyle-checkbox-group>

<script lang="ts">
	import { CheckboxGroup, Checkbox } from "@xtyle/svelte";
</script>

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

---
import { CheckboxGroup, Checkbox } from "@xtyle/astro";
---

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

Checkbox

Group selection (tri-state roll-up)

States

Sizes

Every tone

When to use

Props

Events

Appearance

Sizes

States

Anatomy

Tokens & coverage

Slots

Code

States

Group selection

Related

Checkbox

Live demo

Group selection (tri-state roll-up)

States

Sizes

Every tone

When to use

Props

Events

Appearance

Sizes

States

Anatomy

Tokens & coverage

Slots

Accessibility

Code

States

Group selection

Related