Radio Group

Copy MarkdownOpen

Example

Features

Radio groups can be built in HTML with the <fieldset> and <input> elements, however these can be difficult to style. RadioGroup and Radio help achieve accessible radio groups that can be styled as needed.

• Accessible – Radio groups are exposed to assistive technology via ARIA, and automatically associate a nested <Label>. Description and error message help text slots are supported as well.
• HTML form integration – Each individual radio uses a visually hidden <input> element under the hood, which enables HTML form integration and autofill.
• Validation – Support for native HTML constraint validation with customizable UI, custom validation functions, and server-side validation errors.
• Cross-browser – Mouse, touch, keyboard, and focus interactions are normalized to ensure consistency across browsers and devices.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add radio-group

Anatomy

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

<RadioGroup
  label="Select an Option"
  description="Choose one of the available options below."
>
  <Radio
    value="option-1"
    label="Option 1"
    description="This is the first available option."
  />
  <Radio
    value="option-2"
    label="Option 2"
    description="This is the second available option."
  />
</RadioGroup>

Another Examples

Controlled

Handle the radio group’s state externally, giving developers complete control over selection behavior and integration with other form logic.

Validated

Display validation states for radio inputs, such as error or success feedback, to help users make correct selections and improve form accuracy.

Props

Loading types…