Constella

Radio Group

A set of options where only one can be picked at a time.

View as Markdown
<RadioGroup defaultValue="comfortable">  <Label>    <RadioGroupItem value="default" />    Default  </Label>  <Label>    <RadioGroupItem value="comfortable" />    Comfortable  </Label></RadioGroup>

Installation

$ npx shadcn@latest add @constella/radio-group

Usage

import {  RadioGroup,  RadioGroupItem,} from "@/components/primitives/radio-group";
<RadioGroup defaultValue="option-one">  <Label>    <RadioGroupItem value="option-one" />    Option One  </Label>  <Label>    <RadioGroupItem value="option-two" />    Option Two  </Label></RadioGroup>

Composition

RadioGroup└── RadioGroupItem

Size

Use the size prop on RadioGroupItem. The dot is always half the circle.

<RadioGroupItem size="lg" value="option-one" />
SizeCircleDot
sm14px7px
default16px8px
lg20px10px

Description

Put each item in a horizontal Field, with the label and description in a FieldContent.

Standard spacing for most use cases.

More space between elements.

Minimal spacing for dense layouts.

<RadioGroup defaultValue="comfortable">  <Field orientation="horizontal">    <RadioGroupItem value="default" />    <FieldContent>      <FieldLabel>Default</FieldLabel>      <FieldDescription>Standard spacing for most use cases.</FieldDescription>    </FieldContent>  </Field></RadioGroup>

Choice Card

Put the content and the item inside a FieldLabel to make the whole card pick it.

<RadioGroup defaultValue="plus">  <Field>    <FieldLabel>      <FieldContent>        <FieldTitle>Plus</FieldTitle>        <FieldDescription>For individuals and small teams.</FieldDescription>      </FieldContent>      <RadioGroupItem value="plus" />    </FieldLabel>  </Field></RadioGroup>

Fieldset

Use FieldSet and FieldLegend to name the group.

Subscription Plan

Yearly and lifetime plans offer significant savings.

<FieldSet>  <FieldLegend variant="label">Subscription Plan</FieldLegend>  <FieldSetDescription>    Yearly and lifetime plans offer significant savings.  </FieldSetDescription>  <RadioGroup defaultValue="monthly">    <Field orientation="horizontal">      <RadioGroupItem value="monthly" />      <FieldLabel>Monthly ($9.99/month)</FieldLabel>    </Field>  </RadioGroup></FieldSet>

Disabled

Add disabled to an item's Field, so the item and its label fade together.

<Field disabled orientation="horizontal">  <RadioGroupItem value="option1" />  <FieldLabel>Disabled</FieldLabel></Field>

Invalid

Add invalid to each Field, and aria-invalid to its item.

Notification Preferences

Choose how you want to receive notifications.

<Field invalid orientation="horizontal">  <RadioGroupItem aria-invalid value="email" />  <FieldLabel>Email only</FieldLabel></Field>

API Reference

RadioGroupItem takes size ("sm", "default" or "lg"). RadioGroup and RadioGroupItem take sx, applied last. For the rest, see Base UI Radio Group.