RadioGroup

A set of checkable buttons where no more than one can be checked at a time.

Installation

npx vayu-ui init #one time only

npx vayu-ui add radiogroup

npx vayu-ui add -t radiogroup #with test case needs

Usage

Basic Usage

Select a subscription plan with descriptions.

Subscription Plan

Choose the plan that fits your needs.

Free

Basic features, limited storage.

Pro

All features, 100GB storage.

Enterprise

Unlimited everything, priority support.

Horizontal Layout

Radio buttons arranged horizontally.

Size

Select your preferred size.

Small

Medium

Large

X-Large

Error State

Validation error with disabled option.

Priority

Select a priority level for your ticket.

Low

Medium

High

Please select a priority level.

<RadioGroup
  name="notifications"
  defaultValue="all"
  label="Notification Preferences"
  description="Choose what you want to be notified about"
>
  <RadioGroup.Item
    value="all"
    label="Everything"
    description="Get notified about all activities"
  />
  <RadioGroup.Item
    value="mentions"
    label="Mentions only"
    description="Only get notified when someone mentions you"
  />
  <RadioGroup.Item
    value="none"
    label="Nothing"
    description="Disable all notifications"
    disabled
  />
</RadioGroup>

Anatomy

import { RadioGroup } from 'vayu-ui';

<RadioGroup>
  <RadioGroup.Item value="item-1" />
</RadioGroup>;

Accessibility

Keyboard support: Use Tab to navigate to the radio group. Press Arrow keys to move between items and Space or Enter to select.
ARIA attributes: Uses role="radiogroup" for the container with aria-labelledby and aria-describedby for context. Utilizes hidden native input[type="radio"] for native semantics.
Focus behavior: Focus is visually represented on the custom indicator element while being managed natively by the hidden input element.

Screen readers announce the group's label and description upon focusing. As the user navigates between options, the screen reader reads the individual item's label, its position in the set, and whether it is selected or disabled. Error states are announced dynamically using aria-live="polite".

Component Folder Structure

RadioGroup/
├── RadioGroup.tsx
├── RadioItem.tsx
├── hooks.ts
├── index.ts
└── types.ts

Props

RadioGroup

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the radio group.
`defaultValue`	`string`	`""`	The initial value when uncontrolled.
`onChange`	`(value: string) => void`	-	Event handler called when the value changes.
`name`	`string`	auto-generated	The name used for grouping the inputs.
`disabled`	`boolean`	`false`	When true, prevents interaction with all items.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	The visual orientation of the items.
`label`	`string`	-	The label for the entire group.
`description`	`string`	-	Descriptive text for the group.
`error`	`boolean`	`false`	Indicates if the group has an error.
`errorText`	`string`	-	The error message to display.
`required`	`boolean`	`false`	Marks the field as required.

RadioGroup.Item

Prop	Type	Default	Description
`value`*	`string`	-	The unique value of the item in the group.
`label`	`string`	-	The text label for the radio option.
`description`	`string`	-	Additional descriptive subtext.
`disabled`	`boolean`	`false`	When true, disables the individual radio item.

QRCode

A pure TypeScript QR code generator for React with support for logos, custom colors, and error correction levels.

Rate

A customizable rating component for user feedback and reviews.

RadioGroup

Basic Usage

Horizontal Layout

Error State

On this page