labsUI

Radio Group

Native radios in a fieldset with a legend: browser arrow keys and form submit, a dot that springs in, optional per-option descriptions, vertical or horizontal.

npx @kznlabs/labsui add radio-group
Plan
1 server, 50 clips a month.
10 servers, unlimited clips, analytics.
Contact sales.
Playback speed
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";export function PlanPicker() {  return (    <RadioGroup legend="Plan" name="plan" defaultValue="pro">      <RadioGroupItem value="free" description="1 server, 50 clips a month.">        Free      </RadioGroupItem>      <RadioGroupItem value="pro" description="10 servers, unlimited clips.">        Pro      </RadioGroupItem>    </RadioGroup>  );}

<RadioGroup>

Native radios in a fieldset: arrow keys, form submit and labels work as the browser does.

  • aria-invalid
    boolean

    Indicates the entered value does not conform to the format expected by the application.

  • defaultValuedefault ""
    string

    Value at first render (uncontrolled).

  • legend
    ReactNode

    Visible group label, rendered as the fieldset's <legend>.

  • name
    string

    Form field name; generated when omitted.

  • onValueChange
    (value: string) => void

    Called with the picked item's value.

  • orientationdefault "vertical"
    "vertical" | "horizontal"

    Stack items or lay them in a row.

  • value
    string

    Controlled value; pair with onValueChange.

PropTypeDefault
aria-invalid

Indicates the entered value does not conform to the format expected by the application.

boolean—
defaultValue

Value at first render (uncontrolled).

string""
legend

Visible group label, rendered as the fieldset's <legend>.

ReactNode—
name

Form field name; generated when omitted.

string—
onValueChange

Called with the picked item's value.

(value: string) => void—
orientation

Stack items or lay them in a row.

"vertical" | "horizontal""vertical"
value

Controlled value; pair with onValueChange.

string—

Also accepts every <fieldset> prop.

<RadioGroupItem>

One option. children is its label; description adds a muted line under it.

  • children*
    ReactNode

    Label.

  • value*
    string

    Submitted value.

  • description
    ReactNode

    Muted line under the label.

  • disabled
    boolean

    Shown but not selectable.

PropTypeDefault
children*

Label.

ReactNode—
value*

Submitted value.

string—
description

Muted line under the label.

ReactNode—
disabled

Shown but not selectable.

boolean—

* required. Every component also takes className.