Radio Group

Radio groups give you the same functionality as native HTML radio inputs, without any of the styling. They're perfect for building out custom UIs for selectors.

Startup

12GB
6 CPUs

Business

16GB
8 CPUs

Enterprise

32GB
12 CPUs

Installation

npx headcn@latest add radio-group

Usage

import { Field } from "@/components/ui/field"
import { Label } from "@/components/ui/label"
import { RadioGroup, Radio } from "@/components/ui/radio-group"
<RadioGroup defaultValue="option-one">
  <Field className="flex items-center space-x-2">
    <Radio value="option-one" />
    <Label>Option One</Label>
  </Field>
  <Field className="flex items-center space-x-2">
    <Radio value="option-two" />
    <Label>Option Two</Label>
  </Field>
</RadioGroup>