Circle checkbox
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A round box whose label dims and gets struck through once ticked, like a done item in a to-do list
When to use
- Consent and opt-in fields, such as accepting terms or turning on a feature
- Lists where any number of options can be ticked, like notification channels or permissions
- Selectable cards and tiles for modules, people or a saved payment card
When not to use
- A choice where exactly 1 option of a set may be picked: use the Radio Group component
- An on or off setting that applies the moment it is flipped: use the Switch component
- A complete record entry page with many field types and a submit handler: use the Form blocks
Agent notes
- No example passes a name to
Checkbox, so a native submit sends none of these boxes; give each one a name inside a real form - The base twin sets the mixed state with the
indeterminateprop; the radix twin passescheckedas the string indeterminate - A mixed state draws the same
CheckIconas a ticked box, as the indicator has no minus icon; add one inCheckboxto show a dash
https://reui.io/components/checkbox/c-checkbox-7.mdget_example("c-checkbox-7")npx shadcn@latest add @reui/c-checkbox-7About Shadcn Checkbox Circle To-Do
Circle checkbox. Built by composing Checkbox, Field. A free, open source shadcn checkbox example you can install with npx shadcn@latest add @reui/c-checkbox-7 and edit as your own code.
What You Can Build With Shadcn Checkbox Circle To-Do
- Composes Checkbox, Field, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-checkbox-7
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Checkbox Examples
- Basic Basic checkbox with label
- Disabled Disabled checkbox
- Invalid Invalid checkbox
- Indeterminate Indeterminate checkbox
- Label & Description Checkbox with label and description
- Colored Colored checkbox
- Basic Group Checkbox group
- Setting Card Card checkbox with group
- Frame Group Checkbox group in a frame
- Card Rows Card checkbox group with icons
- Icon Card Rows Card checkbox group with icons
- Corner Check Tiles Custom positioned checkbox
Related Shadcn Component Categories
Open-source shadcn code block components with Shiki syntax highlighting for AI chat, streaming agent output, diff review, and documentation.
Open-source shadcn collapsible components for expandable sections, detail rows, and progressive disclosure.
Open-source shadcn color picker components for brand settings, theme editors, label colors, and design tools.
Open-source shadcn combobox components for searchable selection, async lookup, and command menus.
Open-source shadcn command menu components for command palettes, global search, and power-user navigation.
Open-source shadcn context menu components for right-click menus, file actions, and table row actions.
Frequently Asked Questions
When should I use Shadcn Checkbox Circle To-Do?
Use it for a round box whose label dims and gets struck through once ticked, like a done item in a to-do list.
Shadcn Checkbox as a whole fits:
- Consent and opt-in fields, such as accepting terms or turning on a feature
- Lists where any number of options can be ticked, like notification channels or permissions
- Selectable cards and tiles for modules, people or a saved payment card
For a choice where exactly 1 option of a set may be picked, use the Radio Group component. For an on or off setting that applies the moment it is flipped, use the Switch component. For a complete record entry page with many field types and a submit handler, use the Form blocks.
How do I install Shadcn Checkbox Circle To-Do?
Is Shadcn Checkbox Circle To-Do free to use?
Which components does Shadcn Checkbox Circle To-Do use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.