Components

Radio Group

A set of options where exactly one can be selected.

Every day

Every week

Never

Installation

npx shadcn@latest add @blank/radio-group

Usage

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<RadioGroup defaultValue="comfortable">
  <Field orientation="horizontal">
    <RadioGroupItem value="comfortable" id="r1" />
    <FieldLabel htmlFor="r1">Comfortable</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="compact" id="r2" />
    <FieldLabel htmlFor="r2">Compact</FieldLabel>
  </Field>
</RadioGroup>

Examples

With descriptions

All activity

Every push and comment.

Mentions

Only when someone tags you.

Nothing

Check the inbox yourself.

Choice cards

See Field for radio items laid out as selectable cards.

Plan

Hobby

One project, community support.

Team

Unlimited projects and seats.

API Reference

RadioGroup

Every Radix RadioGroup.Root prop: value, defaultValue, onValueChange, orientation, disabled, required, name.

RadioGroupItem

Every Radix RadioGroup.Item prop: value, disabled, id.