Forms

Radio group

A group of radios.

Server safe2 exportsSource

Import

import { Radio, RadioGroup } from '@the_viveksingh/vivek-ui'

One choice from a few

Renders a real fieldset and legend, which is what groups the radios for a screen reader. Arrow keys move between options, as the ARIA practices require.

Plan

StarterUp to 3 projectsTeamUnlimited projects, 10 seatsEnterpriseSSO, audit log, SLA

<RadioGroup
  name="plan"
  label="Plan"
  defaultValue="team"
  options={[
    { value: 'starter', label: 'Starter', description: 'Up to 3 projects' },
    { value: 'team', label: 'Team', description: 'Unlimited projects, 10 seats' },
    { value: 'enterprise', label: 'Enterprise', description: 'SSO, audit log, SLA' },
  ]}
/>

Horizontal

Billing period

MonthlyAnnual

<RadioGroup
  name="billing"
  label="Billing period"
  orientation="horizontal"
  defaultValue="annual"
  options={[
    { value: 'monthly', label: 'Monthly' },
    { value: 'annual', label: 'Annual' },
  ]}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for RadioGroup
Prop	Type	Default	Description
`name` required	`string`	—	Shared `name` for the radios. Required for native grouping and form submission.
`label`	`ReactNode`	—	Group label, rendered as the `<legend>`.
`options`	`RadioOption[]`	—	Options as data. Ignored when `children` is provided.
`value`	`string`	—	Controlled selection.
`defaultValue`	`string`	—	Uncontrolled initial selection.
`onChange`	`(value: string) => void`	—	—
`orientation`	`'vertical' \| 'horizontal'`	—	—
`size`	`'sm' \| 'md'`	—	—
`disabled`	`boolean`	—	—
`required`	`boolean`	—	—

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Exports

RadioRadioGroup

Rendering

Server safe

RadioGroup carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.