Checkbox

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/checkbox
Copy

Usage#

Copy<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
</script>
 
<Checkbox />

Checked State#

Use checked for uncontrolled checkboxes, or bind it with onCheckedChange to control the state.

Copy<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
 
  let checked = $state(false);
</script>
 
<Checkbox {checked} onCheckedChange={(v) => (checked = v)} />

Invalid State#

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Examples#

Basic#

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description#

Use FieldContent and FieldDescription for helper text.

Disabled#

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Group#

Use multiple fields to create a checkbox list.

Table#

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the Radix UI documentation for more information.