Checkbox

Edit the code — the preview updates live. Try changing props, text, or classes.

function Demo() {
  const [checked, setChecked] = useState(true)
  return (
    <label className="flex cursor-pointer items-center gap-3 text-sm text-fg">
      <Checkbox checked={checked} onCheckedChange={(v) => setChecked(v === true)} />
      Ship with animations
    </label>
  )
}
render(<Demo />)

Copy the source into your project with the registry CLI:

Or install the package and import it:

Import Checkbox from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.