Checkbox

Checkbox components are used to toggle a single boolean value. They can also be used within a CheckboxGroup to toggle multiple values.

Example

Check the checkbox to see the value change.

<script>
  import { Checkbox } from '$lib/ui';
  let isChecked = $state(false);
</script>

<Checkbox bind:checked={isChecked} />

<p>Checked: {isChecked}</p>

Checked: false

Label

A label prop let’s you define a simple String to be used as the checkbox label.

<Checkbox label="I agree to the terms." />

Name

Use the name prop for a single checkbox to specify the FormData key.

<Checkbox label="I agree to the terms." name="approveTerms" />

Error

Display error message below the checkboxes. Also adds error styles.

<Checkbox label="Bauhaus" error="You must like bauhaus" />

Bauhaus

Note

A note prop let’s you define a note displayed below the field.

<Checkbox label="Bauhaus" note="Check above to indicate good taste" />

Leading Label

Labels normally appear to the right of the checkbox. Use the leadingLabel prop instead to place it on the left.

<Checkbox leadingLabel="I agree to the terms." />

Checked

Not normally used because the CheckboxGroup value prop will set which Checkboxes are checked (and overrides this property). If using outside of a CheckboxGroup, then use with the bind:checked directive as shown in the example at the top of this page. The checked prop can also be assigned a Boolean value like checked={user.wantsSpam}.

<Checkbox label="Spam me" checked />

Disabled

Default is true but can also be assigned a Boolean value like disabled={user.isSpammable}.

<Checkbox label="Spam me" disabled />

Value

When used within a CheckboxGroup, this is the value that will be assigned to the CheckboxGroup’s value array when checked.

<Checkbox label="Spam me" value="spamMe" />

Label Named Slot

Since the label prop can only be a String, you can use the label slot instead to pass in a more complex label.

<Checkbox>
  <span slot="label">
    Don't you just <HeartIcon /> spam?
  </span>
</Checkbox>

Leading Label Named Slot

Since the leadingLabel prop can only be a String, you can use the leadingLabel slot instead to pass in a more complex leading label.

<Checkbox>
  <span slot="leadingLabel">
    I hereby confirm that I <HeartIcon /> spam.
  </span>
</Checkbox>

Checkbox Component Props

Checkbox CSS Custom Properties

Checkbox Named Slots