Checkbox - shadcn-svelte

Docs

Checkbox

A control that allows the user to toggle between checked and not checked.

Component Source Primitive API Reference

	<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import Label from "$lib/components/ui/label/label.svelte";
  let checked = false;
</script>

<div class="flex items-center space-x-2">
  <Checkbox id="terms" bind:checked />
  <Label
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label>
</div>

	<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { Label } from "$lib/components/ui/label";
  let checked = false;
</script>

<div class="flex items-center space-x-2">
  <Checkbox id="terms" bind:checked aria-labelledby="terms-label" />
  <Label
    id="terms-label"
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label>
</div>

Installation

	npx shadcn-svelte@latest add checkbox

Usage

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

	<Checkbox />

Examples

With Text

	<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { Label } from "$lib/components/ui/label";
</script>

<div class="items-top flex space-x-2">
  <Checkbox id="terms1" />
  <div class="grid gap-1.5 leading-none">
    <Label
      for="terms1"
      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
      Accept terms and conditions
    </Label>
    <p class="text-sm text-muted-foreground">
      You agree to our Terms of Service and Privacy Policy.
    </p>
  </div>
</div>

	<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { Label } from "$lib/components/ui/label";
</script>

<div class="items-top flex space-x-2">
  <Checkbox id="terms1" />
  <div class="grid gap-1.5 leading-none">
    <Label
      for="terms1"
      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
    >
      Accept terms and conditions
    </Label>
    <p class="text-sm text-muted-foreground">
      You agree to our Terms of Service and Privacy Policy.
    </p>
  </div>
</div>

Disabled

	<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { Label } from "$lib/components/ui/label";
</script>

<div class="flex items-center space-x-2">
  <Checkbox id="terms" disabled />
  <Label
    for="terms2"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label>
</div>

	<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { Label } from "$lib/components/ui/label";
</script>

<div class="flex items-center space-x-2">
  <Checkbox id="terms" disabled />
  <Label
    for="terms2"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </Label>
</div>

Form

When using the checkbox within a form, you'll want to use the <Form.Checkbox /> component instead. This is a wrapper around your existing Checkbox component with some additional functionality for forms.

	<script lang="ts" context="module">
  import { z } from "zod";
  export const formSchema = z.object({
    mobile: z.boolean().default(false)
  });
  export type FormSchema = typeof formSchema;
</script>

<script lang="ts">
  import { page } from "$app/stores";
  import * as Form from "$lib/components/ui/form";
  import type { SuperValidated } from "sveltekit-superforms";
  export let form: SuperValidated<FormSchema> = $page.data.checkboxSingle;
</script>

<Form.Root
  method="POST"
  {form}
  schema={formSchema}
  let:config
  action="?/checkboxSingle"
  class="space-y-6"
>
  <Form.Field {config} name="mobile">
    <Form.Item
      class="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow"
    >
      <Form.Checkbox />
      <div class="space-y-1 leading-none">
        <Form.Label>Use different settings for my mobile devices</Form.Label>
        <Form.Description>
          You can manage your mobile notifications in the <a
            href="/examples/forms">mobile settings</a
          > page.
        </Form.Description>
      </div>
    </Form.Item>
  </Form.Field>
  <Form.Button>Submit</Form.Button>
</Form.Root>

	<script lang="ts" context="module">
  import { z } from "zod";
  export const formSchema = z.object({
    mobile: z.boolean().default(false)
  });
  export type FormSchema = typeof formSchema;
</script>

<script lang="ts">
  import { page } from "$app/stores";
  import * as Form from "$lib/components/ui/form";
  import type { SuperValidated } from "sveltekit-superforms";
  export let form: SuperValidated<FormSchema> = $page.data.checkboxSingle;
</script>

<Form.Root
  method="POST"
  {form}
  schema={formSchema}
  let:config
  action="?/checkboxSingle"
  class="space-y-6"
>
  <Form.Field {config} name="mobile">
    <Form.Item
      class="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4"
    >
      <Form.Checkbox />
      <div class="space-y-1 leading-none">
        <Form.Label>Use different settings for my mobile devices</Form.Label>
        <Form.Description>
          You can manage your mobile notifications in the <a
            href="/examples/forms">mobile settings</a
          > page.
        </Form.Description>
      </div>
    </Form.Item>
  </Form.Field>
  <Form.Button>Submit</Form.Button>
</Form.Root>

Card Collapsible

On This Page