Input & controls

Checkbox & Radio

Q: How do people describe a Checkbox & Radio in plain words?

the little square I tick to select things those round options where I can only pick one checkboxes for multi-select, radio buttons for one choice

Q: How do I implement a Checkbox & Radio?

Use native checkboxes for multi-select filters and a radio group for sort order; wrap each in a label, share name on radios, and support an indeterminate select-all checkbox when children are partially checked.

Checkboxes for multi-select; radios for a single choice in a group.

Also known as tick box · radio button · option group

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Checkbox & Radio".

Use native checkboxes for multi-select filters and a radio group for sort order; wrap each in a label, share name on radios, and support an indeterminate select-all checkbox when children are partially checked.

Anatomy:
- control: Square checkbox or circular radio indicator.
- label: Clickable text bound to the control.
- group: Radios share a name; checkboxes may have select-all.

Preferred API / pattern: `shadcn Checkbox / RadioGroup`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Radios without a shared name
○Avoid: Custom div checkboxes without keyboard support.
○Avoid: Select-all that can't show indeterminate when partial.

In plain wordsHow people search for it

“the little square I tick to select things”“those round options where I can only pick one”“checkboxes for multi-select, radio buttons for one choice”

AnatomyOpen for part names

control: Square checkbox or circular radio indicator.
label: Clickable text bound to the control.
group: Radios share a name; checkboxes may have select-all.

How to write itOpen for stack patterns

Web (HTML/CSS)input type="checkbox" / type="radio"

React + Tailwind + shadcn/uishadcn Checkbox / RadioGroup

SwiftUIToggle (checkbox style) / Picker

Ant Design<Checkbox> / <Radio.Group>

Notes

Never style checkboxes as radios or vice versa—shape carries meaning. Radio groups need a default or an explicit none option. Indeterminate checkboxes are for parent 'partially selected' states (set only via script).

Help me choose: Switch vs Checkbox →

Common mistakesHumans and models trip here

Radios without a shared name: browser treats them as separate groups.
Custom div checkboxes without keyboard support.
Select-all that can't show indeterminate when partial.

More failure symptoms on AI broke it.

Related patterns

Switch / ToggleA binary on/off control that usually takes effect immediately.Select / ComboboxA form control for choosing one (or more) options from a list.Button / Action ButtonA semantic control for an action, with hierarchy expressed through its visual variant.

Spotted a wrong name or missing pattern?

Message on X