About
A RadioGroup allows users to select a single option from a list of mutually exclusive options. Radio groups can be built in HTML with the <fieldset> and <input> elements, however these can be difficult to style. RadioGroup and Radio help achieve accessible radio groups that can be styled as needed.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radio Group [react-aria-components] to your project and fits it to your theme.
Code
How Radio Group [react-aria-components] is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Label } from "@/components/ui/field"
import { Radio, RadioGroup } from "@/components/ui/radio-group"
export function RadioGroupDemo() {
return (
<RadioGroup>
<Label>Favorite pet</Label>
<Radio value="dogs">Dog</Radio>
<Radio value="cats">Cat</Radio>
<Radio value="dragon">Dragon</Radio>
</RadioGroup>
)
}
![Radio Group [react-aria-components] preview](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=1080,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/radio-group/825/preview.png)
![Tag Group [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/tag-group/891/preview.png)
![Date Range Picker [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/date-range-picker/default/preview.png)
![Grid List [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/grid-list/default/preview.png)
![Switch [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/switch/1023/preview.png)
![Select [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/select/864/preview.png)
![Range Calendar [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/range-calendar/default/preview.png)

![Slider [react-aria-components]](https://cdn.21st.dev/cdn-cgi/image/fit=scale-down,width=640,quality=75,format=webp/https://cdn.21st.dev/user_jolbol1/slider/827/preview.png)







