Skip to content
EMBOSS
Docs menu

Checkbox

A small machined well that fills and rises when checked — state reads through color, shape, and depth together.

@emboss/checkbox

Installation

pnpm dlx shadcn@latest add @emboss/checkbox

Usage

example.tsx
import { Checkbox } from "@/components/ui/checkbox";

export function Example() {
  return <Checkbox defaultChecked aria-label="Enable limiter" />;
}

API reference

Checkbox

PropTypeDefaultDescription
checked / defaultChecked / onCheckedChangeboolean / boolean / (checked) => void—Controlled and uncontrolled usage.
indeterminatebooleanfalseMixed state for subset selection; exposed as aria-checked=mixed.
name / valuestring / string—Form participation through a hidden input.
Data attributeDescription
data-checked / data-unchecked / data-indeterminateReflects the current state for styling.

Keyboard

KeysAction
SpaceToggles the checkbox.

Source

View source — checkbox.tsx
checkbox.tsx
"use client";

import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
import { Check, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

export type CheckboxProps = React.ComponentProps<typeof BaseCheckbox.Root>;

/**
 * A small machined well that fills when checked: the accent surface and
 * check glyph rise to embossed, so state reads through color, shape, and
 * depth together.
 *
 * @example
 * <Checkbox defaultChecked aria-label="Enable limiter" />
 */
function Checkbox({ className, ...props }: CheckboxProps) {
  return (
    <BaseCheckbox.Root
      data-slot="checkbox"
      className={cn(
        "group inline-flex size-4.5 shrink-0 cursor-pointer items-center justify-center rounded-xs bg-well shadow-deboss-1 focus-ring transition-[background-color,box-shadow] duration-(--duration-settle) ease-(--ease-settle) data-checked:bg-accent data-checked:shadow-emboss-1 data-disabled:pointer-events-none data-disabled:opacity-50 data-indeterminate:bg-accent data-indeterminate:shadow-emboss-1",
        className,
      )}
      {...props}
    >
      <BaseCheckbox.Indicator
        data-slot="checkbox-indicator"
        className="flex text-accent-fg transition-[scale,opacity] duration-(--duration-press) ease-(--ease-press) data-starting-style:scale-50 data-starting-style:opacity-0"
      >
        <Check
          className="size-3.5 group-data-indeterminate:hidden"
          strokeWidth={3}
          aria-hidden
        />
        <Minus
          className="hidden size-3.5 group-data-indeterminate:block"
          strokeWidth={3}
          aria-hidden
        />
      </BaseCheckbox.Indicator>
    </BaseCheckbox.Root>
  );
}

export { Checkbox };

Related

SwitchA console slide switch: the thumb travels a milled channel and seats with a sprung settle, with engraved I/O glyphs for state.Radio GroupRecessed circular wells where the selected option seats an embossed accent pin; arrow keys rove between options.