Checkbox

Usage

Receive updates

Not selected

Svelte

<label><Checkbox name="updates" value="yes" bind:checked /> Receive updates</label>

Checkmark motion

Checkmark motion respects reduced motion. Hiding a checked control does not delay its parent.

Animated choice

Playground

View generated code

Svelte

<script>
	import { Checkbox } from 'bref-ui';
	let checked = $state(false);
</script>

<label for="playground-checkbox">Receive updates</label>
<Checkbox
	id="playground-checkbox"
	size="medium"
	bind:checked
	disabled={false}
	required={false}
	aria-invalid={false}
	indeterminate={false}
/>

Sizes and states

Props and native behavior

Component props
Prop	Type	Required	Default	Description
`size`	`Size`	No	`medium`	Checkbox size from x-small through x-large.
`checked`	`boolean`	No	`false`	Bind to the checked state. Checkmark motion respects reduced motion and does not delay removing a parent.

Native input attributes, events, labels, validation, form values and keyboard activation are forwarded. Use bind:checked when needed. Native indeterminate sets the mixed input state; the component currently has no separate mixed-state glyph. A checked box submits its value; an unchecked box submits nothing.

No submission yet.

Validation and focus

Invalid unchecked

Invalid checked

Keyboard focus

Tab through these controls to check focus. Native validation after interaction and aria-invalid retain a quiet error edge without hiding focus.