Checkbox

Overview

Single boolean toggle for opt-in selections within forms or settings.

<script lang="ts">
  import Checkbox from '@lostgradient/cinder/checkbox';
</script>

<Checkbox />

Live preview

Use when

Avoid when

Flipping a single setting on or off with immediate effect — use toggle instead.
Picking exactly one option from a small fixed set — use RadioGroup or segmented-control instead.

Unchecked and checked variants with associated labels.

Disabled state for both unchecked and checked checkboxes.

A control-only checkbox associated with a rich row label.

A parent checkbox driven by its children. Indeterminate clears once the user toggles checked.

Validation error message surfaces via aria-invalid and aria-describedby.

Props for checkbox
Name	Type	Default	Description
`id`	`text`		Unique identifier for label association and ARIA wiring. Optional: when omitted, a stable id is generated via `$props.id()` (or inherited from a FormField context), matching Input/Autocomplete. Provide it when you need a known id to reference.
`checked` bindable	`boolean`	`false`	Bound checked state.
`onValueChangeRequest`	`(next: boolean) => boolean\|void`		Intercept a proposed checked state before the bindable value is written. Return a replacement value to transform it.
`onValueChange`	`(next: boolean) => void`		Notify after the bindable value has been committed.
`indeterminate` bindable	`boolean`	`false`	Bound indeterminate state. Mutually exclusive with `checked` visually.
`label`	`text`		Visible label rendered in a `<label>` element associated via `for`.
`description`	`text`		Helper text displayed below the checkbox; wired via `aria-describedby`.
`error`	`text`		Validation error message; sets `aria-invalid="true"` and `aria-describedby`.
`disabled`	`boolean`		Disables the checkbox.
`required`	`boolean`
`onchange`	`ChangeEventHandler<HTMLInputElement>\|undefined\|null`