Component

Checkbox

A square checkbox that does not steal the NUI’s keyboard.

stablev0.3.0 Chromium 103 ui-scale safe

Install

Copies the file into components/ds/, with its registry dependencies and npm packages. See Installation for the one-time setup.
bunx shadcn@3 add @fastrp/checkbox

Examples

Default

Open alone

API

<Checkbox />Takes the props of what it wraps

A square checkbox — a `button`, not an `<input>`, for the same keyboard-lease reason as `Switch`. `checked="indeterminate"` draws a dash. Sounds like a switch.

Dependencies

npm

  • @radix-ui/react-checkbox@^1.1.3
  • lucide-react@^0.469.0

Registry

  • @fastrp/utils

Source

components/ds/checkbox.tsxShow
'use client';

import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check, Minus } from 'lucide-react';
import type * as React from 'react';
import { cn } from '@/lib/utils';

// @fast-ds [email protected]

/**
 * A square checkbox — a `button`, not an `<input>`, for the same keyboard-lease reason as
 * `Switch`. `checked="indeterminate"` draws a dash. Sounds like a switch.
 */
function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      data-sfx="toggle"
      className={cn(
        'peer flex size-5 shrink-0 items-center justify-center rounded-[0.3125rem] border border-foreground/25 bg-ink/60 text-primary-foreground transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-selection focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-danger data-[state=checked]:border-primary data-[state=indeterminate]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="group flex items-center justify-center [&_svg]:size-3.5"
      >
        <Check strokeWidth={3} className="group-data-[state=indeterminate]:hidden" />
        <Minus strokeWidth={3} className="hidden group-data-[state=indeterminate]:block" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

export { Checkbox };