Checkbox & RadioGroup

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/checkbox.json https://dyeoh.github.io/flootlets/r/radio-group.json

Both need Tailwind CSS v4; see Installation for the setup.

How would you like it?

Delivery

Pos Laju, 2–4 working days

Pick up from the shop

Ready tomorrow

Send me news and offers

About once a month. Unsubscribe any time.

I accept the terms

Please accept the terms to continue

export default function ChoiceExamples() {
  return (
    <Stack gap={6}>
      <RadioGroup
        label="How would you like it?"
        defaultValue="delivery"
        options={[
          { value: 'delivery', label: 'Delivery', description: 'Pos Laju, 2–4 working days' },
          { value: 'pickup', label: 'Pick up from the shop', description: 'Ready tomorrow' },
        ]}
      />
      <Checkbox
        label="Send me news and offers"
        description="About once a month. Unsubscribe any time."
      />
      <Checkbox label="I accept the terms" required error="Please accept the terms to continue" />
    </Stack>
  );
}

Both use real (visually hidden) native inputs underneath, so they work with forms and screen readers exactly like native controls, and both are built on Kobalte.

• Checkbox: clicking the label toggles it. With error, it’s marked invalid and the message is read with it.
• RadioGroup: a labelled group. Tab moves into the group, then the arrow keys move between options, as screen-reader users expect. Each option can have its own description.

Checkbox props

Prop	Type
label	string	Required
checked / defaultChecked / onChange	boolean / boolean / (checked: boolean) => void
value	string	Submitted when checked. Default “on”
description, error, name, required, disabled

RadioGroup props

Prop	Type
label	string	Required. Names the group
options	{ value; label; description?; disabled? }[]
value / defaultValue / onChange	string / string / (value: string) => void
orientation	'vertical' | 'horizontal'	Default vertical
description, error, hideLabel, name, required, disabled