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 "@/components/ui/checkbox";
  import Label from "@/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 "@/components/ui/checkbox";
  import { Label } from "@/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 add checkbox

Usage

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

	<Checkbox />

Examples

With Text

	<script lang="ts">
  import { Checkbox } from "@/components/ui/checkbox";
  import { Label } from "@/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 "@/components/ui/checkbox";
  import { Label } from "@/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 "@/components/ui/checkbox";
  import { Label } from "@/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 "@/components/ui/checkbox";
  import { Label } from "@/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>

Card Collapsible

On This Page