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	Required	Bindable	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`	`boolean`	`false`		bind	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`	`boolean`	`false`		bind	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`	`unknown`		req
`fieldClassName`	`text`				Extra class names merged with the outer checkbox field wrapper.
`onchange`	`unknown`		req