Zaidan

Command Palette

Search for a command to run...

GitHub

Checkbox

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

Installation

CLI

Manual

Install the following dependencies:

Copy and paste the following code into your project.

import * as CheckboxPrimitive from "@kobalte/core/checkbox";
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import { CheckIcon } from "lucide-solid";
import { type ComponentProps, splitProps, type ValidComponent } from "solid-js";


import { cn } from "~/lib/utils";


type CheckboxProps<T extends ValidComponent = "div"> = PolymorphicProps<
  T,
  CheckboxPrimitive.CheckboxRootProps<T>
> &
  Pick<ComponentProps<T>, "class">;


const Checkbox = <T extends ValidComponent = "div">(props: CheckboxProps<T>) => {
  const [local, others] = splitProps(props as CheckboxProps, ["class", "id"]);
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      class="peer data-disabled:cursor-not-allowed data-disabled:opacity-50"
      {...others}
    >
      <CheckboxPrimitive.Input data-slot="checkbox-input" class="peer sr-only" id={local.id} />
      <CheckboxPrimitive.Control
        class={cn(
          "relative z-checkbox shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
          local.class,
        )}
      >
        <CheckboxPrimitive.Indicator
          data-slot="checkbox-indicator"
          class="z-checkbox-indicator grid place-content-center text-current transition-none"
        >
          <CheckIcon class="size-3.5" />
        </CheckboxPrimitive.Indicator>
      </CheckboxPrimitive.Control>
    </CheckboxPrimitive.Root>
  );
};


type CheckboxLabelProps<T extends ValidComponent = "label"> = PolymorphicProps<
  T,
  CheckboxPrimitive.CheckboxLabelProps<T>
> &
  Pick<ComponentProps<T>, "class" | "children">;


const CheckboxLabel = <T extends ValidComponent = "label">(props: CheckboxLabelProps<T>) => {
  const [local, others] = splitProps(props as CheckboxLabelProps, ["class", "children"]);
  return (
    <CheckboxPrimitive.Label
      data-slot="checkbox-label"
      class={cn(
        "font-medium text-sm leading-none peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-70",
        local.class,
      )}
      {...others}
    >
      {local.children}
    </CheckboxPrimitive.Label>
  );
};


export { Checkbox, CheckboxLabel };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Checkbox } from "~/components/ui/checkbox";
import { Field, FieldLabel } from "~/components/ui/field";
function CheckboxBasic() {
  return (
    <Example title="Basic">
      <Field orientation="horizontal">
        <Checkbox id="terms" />
        <FieldLabel for="terms">Accept terms and conditions</FieldLabel>
      </Field>
    </Example>
  );
}

With Description

import { Checkbox } from "~/components/ui/checkbox";
import { Field, FieldContent, FieldDescription, FieldLabel } from "~/components/ui/field";
function CheckboxWithDescription() {
  return (
    <Example title="With Description">
      <Field orientation="horizontal">
        <Checkbox id="terms-2" defaultChecked />
        <FieldContent>
          <FieldLabel for="terms-2">Accept terms and conditions</FieldLabel>
          <FieldDescription>
            By clicking this checkbox, you agree to the terms and conditions.
          </FieldDescription>
        </FieldContent>
      </Field>
    </Example>
  );
}

Invalid

import { Checkbox } from "~/components/ui/checkbox";
import { Field, FieldLabel } from "~/components/ui/field";
function CheckboxInvalid() {
  return (
    <Example title="Invalid">
      <Field orientation="horizontal" data-invalid>
        <Checkbox id="terms-3" aria-invalid />
        <FieldLabel for="terms-3">Accept terms and conditions</FieldLabel>
      </Field>
    </Example>
  );
}

Disabled

import { Checkbox } from "~/components/ui/checkbox";
import { Field, FieldLabel } from "~/components/ui/field";
function CheckboxDisabled() {
  return (
    <Example title="Disabled">
      <Field orientation="horizontal">
        <Checkbox id="toggle" disabled />
        <FieldLabel for="toggle">Enable notifications</FieldLabel>
      </Field>
    </Example>
  );
}

With Title

import { Checkbox } from "~/components/ui/checkbox";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldTitle,
} from "~/components/ui/field";
function CheckboxWithTitle() {
  return (
    <Example title="With Title">
      <FieldGroup>
        <FieldLabel for="toggle-2">
          <Field orientation="horizontal">
            <Checkbox id="toggle-2" defaultChecked />
            <FieldContent>
              <FieldTitle>Enable notifications</FieldTitle>
              <FieldDescription>
                You can enable or disable notifications at any time.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel for="toggle-4">
          <Field orientation="horizontal" data-disabled>
            <Checkbox id="toggle-4" disabled />
            <FieldContent>
              <FieldTitle>Enable notifications</FieldTitle>
              <FieldDescription>
                You can enable or disable notifications at any time.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      </FieldGroup>
    </Example>
  );
}

In Table

import { createSignal, For } from "solid-js";
import { Checkbox } from "~/components/ui/checkbox";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
function CheckboxInTable() {
  const [selectedRows, setSelectedRows] = createSignal<Set<string>>(new Set(["1"]));


  const selectAll = () => selectedRows().size === tableData.length;


  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedRows(new Set(tableData.map((row) => row.id)));
    } else {
      setSelectedRows(new Set<string>());
    }
  };


  const handleSelectRow = (id: string, checked: boolean) => {
    const newSelected = new Set(selectedRows());
    if (checked) {
      newSelected.add(id);
    } else {
      newSelected.delete(id);
    }
    setSelectedRows(newSelected);
  };


  return (
    <Example title="In Table">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead class="w-8">
              <Checkbox id="select-all" checked={selectAll()} onChange={handleSelectAll} />
            </TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Email</TableHead>
            <TableHead>Role</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <For each={tableData}>
            {(row) => (
              <TableRow data-state={selectedRows().has(row.id) ? "selected" : undefined}>
                <TableCell>
                  <Checkbox
                    id={`row-${row.id}`}
                    checked={selectedRows().has(row.id)}
                    onChange={(checked) => handleSelectRow(row.id, checked)}
                  />
                </TableCell>
                <TableCell class="font-medium">{row.name}</TableCell>
                <TableCell>{row.email}</TableCell>
                <TableCell>{row.role}</TableCell>
              </TableRow>
            )}
          </For>
        </TableBody>
      </Table>
    </Example>
  );
}

Group

import { Checkbox } from "~/components/ui/checkbox";
import { Field, FieldLabel } from "~/components/ui/field";
function CheckboxGroup() {
  return (
    <Example title="Group">
      <Field>
        <FieldLabel>Show these items on the desktop:</FieldLabel>
        <Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-hard-disks-ljj" />
          <FieldLabel for="finder-pref-9k2-hard-disks-ljj" class="font-normal">
            Hard disks
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-external-disks-1yg" />
          <FieldLabel for="finder-pref-9k2-external-disks-1yg" class="font-normal">
            External disks
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
          <FieldLabel for="finder-pref-9k2-cds-dvds-fzt" class="font-normal">
            CDs, DVDs, and iPods
          </FieldLabel>
        </Field>
        <Field orientation="horizontal">
          <Checkbox id="finder-pref-9k2-connected-servers-6l2" />
          <FieldLabel for="finder-pref-9k2-connected-servers-6l2" class="font-normal">
            Connected servers
          </FieldLabel>
        </Field>
      </Field>
    </Example>
  );
}
PreviewDocs