Radio - HapplyUI

A radio group component with animated SVG indicator and primary/neutral color variants.

Installation

bunx @happlyui/cli@latest add radio

Dependencies

npm packages

@radix-ui/react-radio-group

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
happly-ui-utils

Usage

import * as Radio from "@/components/ui/radio"

<Radio.Group defaultValue="r1">
  <Radio.Item value="r1" />
  <Radio.Item value="r2" />
</Radio.Group>

Examples

Demo

Basic radio group.

<Radio.Group defaultValue="r1" className="flex gap-2">
  <Radio.Item value="r1" />
  <Radio.Item value="r2" />
</Radio.Group>

Variants

Primary and neutral color variants.

Primary

Neutral

<Radio.Group variant="primary" defaultValue="r1">
  <Radio.Item value="r1" />
</Radio.Group>
<Radio.Group variant="neutral" defaultValue="r1">
  <Radio.Item value="r1" />
</Radio.Group>

Disabled

Disabled radio items.

<Radio.Group defaultValue="r1">
  <Radio.Item value="r1" disabled />
  <Radio.Item value="r2" disabled />
</Radio.Group>

With Label

Radio group composed with Label component.

Spam

Harrassment

Violation of Rules

<Radio.Group defaultValue="spam">
  <div className="flex items-start gap-2">
    <Radio.Item value="spam" id="l1" />
    <Label.Root htmlFor="l1">Spam</Label.Root>
  </div>
</Radio.Group>

With Label Extended

Radio with extended label layouts including sublabels, badges, descriptions, and link buttons.

Label(Sublabel)

NEW

Label(Sublabel)

NEW

Insert the radio description here.

Label(Sublabel)

NEW

Label(Sublabel)

NEW

Insert the radio description here.

<Radio.Group defaultValue="r1">
  <div className="flex items-center gap-2">
    <Radio.Item value="r1" id="r1" />
    <Label.Root htmlFor="r1">
      Label
      <Label.Sub>(Sublabel)</Label.Sub>
    </Label.Root>
  </div>
</Radio.Group>

With Form Field

Radio group composed with FormField for consistent label and hint.

Report Reason*

Spam

Harassment

Violation of Rules

Select the reason for your report.

<FormField.Root label="Report Reason" required hint="Select the reason for your report.">
  <Radio.Group defaultValue="spam" className="flex flex-col gap-3">
    <div className="flex items-center gap-2">
      <Radio.Item value="spam" id="report-spam" />
      <Label.Root htmlFor="report-spam" className="text-paragraph-sm">
        Spam
      </Label.Root>
    </div>
    <div className="flex items-center gap-2">
      <Radio.Item value="harassment" id="report-harassment" />
      <Label.Root htmlFor="report-harassment" className="text-paragraph-sm">
        Harassment
      </Label.Root>
    </div>
    <div className="flex items-center gap-2">
      <Radio.Item value="violation" id="report-violation" />
      <Label.Root htmlFor="report-violation" className="text-paragraph-sm">
        Violation of Rules
      </Label.Root>
    </div>
  </Radio.Group>
</FormField.Root>

API Reference

Radio.Group

The radio group container. Extends Radix RadioGroup.Root props.

Prop	Type	Default	Description
`variant`	`'primary' \| 'neutral'`	`'primary'`	Color variant for the checked indicator
`defaultValue`	`string`	-	Default selected value for uncontrolled usage
`value`	`string`	-	Controlled selected value
`onValueChange`	`(value: string) => void`	-	Callback when the selected value changes

Radio.Item

An individual radio item with animated SVG indicator.

Prop	Type	Default	Description
`value`	`string`	-	The value of this radio item
`disabled`	`boolean`	`false`	Disable this radio item