Radio Group

A radio group is a collection of radio buttons that are displayed vertically.

Third Party Library

This component uses at least one third party library under the hood. Refer to the library's documentation below for more information on the API.

API Documentation

Import

import { RadioGroup } from "@aeonkit/react";

Usage

Default

Use the RadioGroup component to create a radio group. Use the RadioGroup.Item component to create radio buttons.

Preview

Houston

Austin

Dallas

Code

<RadioGroup name="city" defaultValue="austin" className="flex-col">
  <div className="flex flex-row items-center gap-2">
    <RadioGroup.Item id="houston" value="houston" />
    <Label htmlFor="houston">Houston</Label>
  </div>
  <div className="flex flex-row items-center gap-2">
    <RadioGroup.Item id="austin" value="austin" />
    <Label htmlFor="austin">Austin</Label>
  </div>
  <div className="flex flex-row items-center gap-2">
    <RadioGroup.Item id="dallas" value="dallas" />
    <Label htmlFor="dallas">Dallas</Label>
  </div>
</RadioGroup>

Props

RadioGroup

API Interface: RadioGroupProps

RadioGroup.Item

API Interface: RadioGroupItemProps