ReUI Radio Group

Component

About

ReUI Radio Group with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ReUI Radio Group to your project and fits it to your theme.

Code

How ReUI Radio Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Field, FieldLabel } from "@/components/ui/reui-radio-group-utils/field"
import {
  RadioGroup,
  RadioGroupItem,
} from "@/components/ui/reui-radio-group"

export default function Pattern() {
  return (
    <RadioGroup defaultValue="blue" className="w-fit">
      <Field orientation="horizontal">
        <RadioGroupItem
          value="blue"
          id="color-blue"
          className="border-blue-500 data-checked:border-blue-500 [&_[data-slot=radio-group-indicator]]:text-blue-500"
        />
        <FieldLabel htmlFor="color-blue">Blue</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem
          value="green"
          id="color-green"
          className="border-green-500 data-checked:border-green-500 [&_[data-slot=radio-group-indicator]]:text-green-500"
        />
        <FieldLabel htmlFor="color-green">Green</FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <RadioGroupItem
          value="yellow"
          id="color-yellow"
          className="border-yellow-500 data-checked:border-yellow-500 [&_[data-slot=radio-group-indicator]]:text-yellow-500"
        />
        <FieldLabel htmlFor="color-yellow">Yellow</FieldLabel>
      </Field>
    </RadioGroup>
  )
}