Faber UI
Components

RadioGroup

A group of mutually exclusive radio buttons.

RadioGroup is built on the Base UI RadioGroup primitive. It renders a set of mutually exclusive options.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/radio-group.json

Usage

typescript
"use client";

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

export default function Example() {
  return (
    <RadioGroup defaultValue="option-1">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-1" id="option-1" />
        <label htmlFor="option-1">Option one</label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="option-2" id="option-2" />
        <label htmlFor="option-2">Option two</label>
      </div>
    </RadioGroup>
  );
}

Examples

Default

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
RadioGroupdata-slot="radio-group"RadioGroupBase UI—
RadioGroupItemdata-slot="radio-group-item"Radio.RootBase UI—

Changelog

  1. v0.3.0Checkbox, RadioGroup and Label show their disabled styles, which previously never applied because the controls render a span.patch
Full RadioGroup history

Last updated on

On this page