Checkbox & Radio

Installation

$ npx shadcn@latest add https://goodui.dev/r/checkbox.json

The file lands in components/goodui/checkbox.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/checkbox works too.

Usage

import * as React from "react"
import { Checkbox, Radio, RadioGroup } from "@/components/goodui/checkbox"

export function BookingOptions() {
  const [plan, setPlan] = React.useState("monthly")
  const [terms, setTerms] = React.useState(false)

  return (
    <form className="flex max-w-md flex-col gap-5">
      <RadioGroup value={plan} onValueChange={setPlan} variant="card" name="plan" aria-label="Billing period">
        <Radio value="monthly" label="Monthly" description="$29 per month, cancel any time" />
        <Radio value="yearly" label="Yearly" description="$290 per year, two months free">
          <span className="mt-1 text-xs font-medium text-emerald-600 dark:text-emerald-400">Most popular</span>
        </Radio>
      </RadioGroup>
      <Checkbox name="sms" defaultChecked label="SMS reminders" description="Text clients 24 hours before each booking." />
      <Checkbox checked={terms} onCheckedChange={setTerms} label="I accept the terms of service" required />
    </form>
  )
}

When to use

Examples

const all = selected.length === rows.length
const some = selected.length > 0 && !all

<Checkbox
  aria-label="Select all bookings"
  checked={all}
  indeterminate={some}
  onCheckedChange={(on) => setSelected(on ? rows.map((r) => r.id) : [])}
  size="sm"
/>

<RadioGroup orientation="horizontal" defaultValue="card" aria-label="Payment method" animation="pop">
  <Radio value="card" label="Card" />
  <Radio value="cash" label="Cash" />
  <Radio value="invoice" label="Invoice" />
</RadioGroup>

API reference

Accessibility

• •Real <input type="checkbox"> and <input type="radio"> elements sit invisibly on the box, so forms, required, autofill and screen readers work natively.
• •Each option is a <label>, so the text and the whole card are click targets. label and description are linked with aria-labelledby and aria-describedby.
• •indeterminate sets the native indeterminate property, which screen readers announce as mixed.
• •Checkbox invalid sets aria-invalid; on Radio it only changes the color, so also show an error message.
• •RadioGroup renders role="radiogroup"; give it a name with aria-label or aria-labelledby. Without label, give a Checkbox an aria-label.

Motion

• •draw (default): the check stroke draws in over 300 ms after a 50 ms delay and retracts in 260 ms; a radio dot scales in over 200 ms.
• •pop: the box pops from 0.72 past 1.14 back to 1 in 340 ms when checked. bounce: the mark springs in with overshoot over 380 ms while the box squishes for 400 ms.
• •Press: the box shrinks to 0.9 (neo shifts into its shadow). Colors and borders change in 160 ms.
• •pop and bounce only play after the user has interacted, never on first render.
• •Reduced motion: no transitions or keyframes; the check and dot appear fully drawn at once.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related