Checkbox

An interactive component for selecting one or multiple options in a list.

Label

Anatomy

Usage

<script>
  import {Checkbox} from 'ui-ingredients';
  import {CheckIcon} from '$lib/icons';
</script>

<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.Label>Label</Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>

Usage with Field component

<script>
  import {Checkbox, Field} from 'ui-ingredients';
  import {CheckIcon} from '$lib/icons';
</script>

<Field.Root>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator>
        <CheckIcon />
      </Checkbox.Indicator>
    </Checkbox.Control>
    <Checkbox.Label>Label</Checkbox.Label>
    <Checkbox.HiddenInput />
  </Checkbox.Root>

  <Field.HelperText>This is a helper text</Field.HelperText>
  <Field.ErrorText>This is an error text</Field.ErrorText>
</Field.Root>

API Reference

Root

Prop	Default	Description
`checked`		`CheckedState` The controlled checked state of the checkbox
`defaultChecked`		`CheckedState` The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.
`disabled`		`boolean` Whether the checkbox is disabled
`form`		`string` The id of the form that the checkbox belongs to.
`id`		`string` The unique identifier of the machine.
`ids`		`{ root?: string; hiddenInput?: string; control?: string; label?: string; }` The ids of the elements in the checkbox. Useful for composition.
`invalid`		`boolean` Whether the checkbox is invalid
`name`		`string` The name of the input field in a checkbox. Useful for form submission.
`onCheckedChange`		`(details: CheckedChangeDetails) => void` The callback invoked when the checked state changes.
`readOnly`		`boolean` Whether the checkbox is read-only
`required`		`boolean` Whether the checkbox is required
`value`	`"on"`	`string` The value of checkbox input. Useful for form submission.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"indeterminate" \| "checked" \| "unchecked"

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"indeterminate" \| "checked" \| "unchecked"

HiddenInput

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"indeterminate" \| "checked" \| "unchecked"

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-active`	Present when active or pressed
`data-disabled`	Present when disabled
`data-focus`	Present when focused
`data-focus-visible`	Present when focused with keyboard
`data-hover`	Present when hovered
`data-invalid`	Present when invalid
`data-readonly`	Present when read-only
`data-state`	"indeterminate" \| "checked" \| "unchecked"