Field with radio groups and checkboxes
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: Email opt-in checkboxes with one locked on, then a public or private radio choice, each under its own legend
When to use
- Labeled inputs, selects, text areas and code entry with optional hint text under the control
- Preference and permission lists where every switch or checkbox has a title and a description
- Validation states with a red label and one error, or a list of them, under the control
When not to use
- Delivery channels flipped on and off by switches, not ticked: use the Field Notification Preferences example
- A complete page for entering or editing a record, such as an invoice or a profile: use the Form blocks
- A full page of toggle rows for alert channels, app integrations or workspace options: use the Settings blocks
- A numeric value stepped with plus and minus buttons or scrubbed by dragging: use the Number Field component
Agent notes
FieldTitleis a plain div, so aCheckboxorSwitchtitled only by it has no accessible name; point aFieldLabelat its id insteaddata-invalidonFieldonly sets a red text color, which its label inherits; the control turns red from aria-invalid, which no example sets- Nothing ties
FieldDescriptionorFieldErrorto the control; give them ids and list those in the control's aria-describedby
https://reui.io/components/field/c-field-4.mdget_example("c-field-4")npx shadcn@latest add @reui/c-field-4Shadcn Components in Field Radio & Checkboxes
About Shadcn Field Radio & Checkboxes
Field with radio groups and checkboxes. Built by composing Checkbox, Field, Radio Group. A free, open source shadcn field example you can install with npx shadcn@latest add @reui/c-field-4 and edit as your own code.
What You Can Build With Shadcn Field Radio & Checkboxes
- Composes Checkbox, Field, Radio Group, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-field-4
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Field Examples
- Input Groups Fields with input groups
- Input & Textarea Field with input and textarea
- Select Controls Field with select control
- Slider & Switch Filed with slider and switch
- OTP Input Field with OTP input
- Settings Form Settings form with validation
- Permissions Permission settings with checkboxes
- Responsive Layout Responsive field layout
- Notification Preferences Notification preferences form
- Validation Errors Form with validation errors
Related Shadcn Component Categories
Open-source shadcn file type icon components for file extensions, export formats, and file browsers.
Open-source shadcn file upload components for drag-and-drop uploads, multi-file flows, and upload progress.
Open-source shadcn filters components for filter bars, faceted search, and dashboard filtering.
Open-source shadcn frame components for embedded previews, app shells, and device mockups.
Open-source shadcn gantt components with split tree and timeline panes, drag scheduling, and progress rollups.
Open-source shadcn hover card components for profile previews, rich link previews, and contextual details.
Frequently Asked Questions
When should I use Shadcn Field Radio & Checkboxes?
Use it for email opt-in checkboxes with one locked on, then a public or private radio choice, each under its own legend.
Shadcn Field as a whole fits:
- Labeled inputs, selects, text areas and code entry with optional hint text under the control
- Preference and permission lists where every switch or checkbox has a title and a description
- Validation states with a red label and one error, or a list of them, under the control
For delivery channels flipped on and off by switches, not ticked, use the Field Notification Preferences example. For a complete page for entering or editing a record, such as an invoice or a profile, use the Form blocks. For a full page of toggle rows for alert channels, app integrations or workspace options, use the Settings blocks. For a numeric value stepped with plus and minus buttons or scrubbed by dragging, use the Number Field component.
How do I install Shadcn Field Radio & Checkboxes?
Is Shadcn Field Radio & Checkboxes free to use?
Which components does Shadcn Field Radio & Checkboxes 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.