RadCN
Inputsreadycomponentready

Checkbox

A native checkbox primitive with explicit checked, disabled, invalid, mixed, form, label, and customization hooks.

Importimport { Checkbox } from 'radcn/checkbox'
Preview

Live package example

Render the three upstream Checkbox examples with labels, descriptions, disabled state, and card-like checked composition.

Example Parity

Render the three upstream Checkbox examples with labels, descriptions, disabled state, and card-like checked composition.

Preview

By clicking this checkbox, you agree to the terms and conditions.

You agree to our Terms of Service and Privacy Policy.

import { Checkbox } from 'radcn/checkbox'
import { Label } from 'radcn/label'

export function CheckboxExamples() {
  return (
    <>
      <div>
        <Checkbox id="terms" name="terms" />
        <Label for="terms">Accept terms and conditions</Label>
      </div>

      <div>
        <Checkbox checked id="terms-2" name="terms-2" />
        <Label for="terms-2">Accept terms and conditions</Label>
        <p>By clicking this checkbox, you agree to the terms and conditions.</p>
      </div>

      <div>
        <Checkbox disabled id="toggle" name="toggle" />
        <Label disabled for="toggle">Enable notifications</Label>
      </div>

      <label>
        <Checkbox checked class="custom-checkbox" id="toggle-2" name="toggle-2" />
        <span>Enable notifications</span>
        <span>You can enable or disable notifications at any time.</span>
      </label>
    </>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Checkbox } from 'radcn/checkbox'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Checkbox renders a native input type="checkbox", so checked, unchecked, disabled, form submission, reset, and label activation behavior stay browser-owned.
  • Labels are real label elements wired by id/for or wrapping label composition; descriptions remain explicit app-owned markup.
  • Invalid state maps to aria-invalid and aria-describedby when composed with Field or Form error text.
  • Indeterminate examples use aria-checked="mixed" and data-state hooks for static server-rendered mixed state.

Customization

  • Checkbox exposes data-radcn-checkbox-wrapper, data-radcn-checkbox-input, and data-radcn-checkbox-indicator hooks.
  • Wrapper and input expose data-state for checked, unchecked, and indeterminate styling.
  • Use class and style plus CSS variables such as --radcn-control-border, --radcn-control-bg, --radcn-control-checked-bg, --radcn-control-fg, and --radcn-control-invalid.
  • Card-like label wrappers, description layout, hover styles, and checked parent styling remain app-owned composition.

Remix 3 Notes

  • defaultChecked maps to RadCN checked for server-rendered initial state; apps own later client state if they need it.
  • className maps to class, data-slot maps to data-radcn-checkbox-* hooks, and aria-invalid maps to ariaInvalid.
  • CheckboxPrimitive.Root, CheckboxPrimitive.Indicator, and Radix state mechanics map to a native input plus explicit RadCN props and data-state hooks.
  • CheckIcon and lucide-react are presentation details; RadCN keeps a dependency-free package indicator that apps can restyle.
  • Tailwind peer and has selectors map to app CSS using RadCN hooks, class, style, and CSS variables.
  • vendor source remains read-only evidence and is not imported by RadCN.