@usevyre/react @usevyre/vue

Radio

A controlled single-choice group. RadioGroup owns the selected value; render it data-driven with an options array, or composable with <Radio> children for custom content. Uses role="radiogroup" with native radio inputs for full keyboard and screen-reader support. For multi-select use Checkbox; for a compact picker use Select.

Options array

The quickest form — pass options with value / label / optional description and disabled. Bind with value + onChange (or v-model in Vue).

Selected: pro

 
import { useState } from "react";
import { RadioGroup } from "@usevyre/react";

const [plan, setPlan] = useState("pro");

<RadioGroup
  value={plan}
  onChange={setPlan}
  options={[
    { value: "free", label: "Free", description: "For hobby projects" },
    { value: "pro",  label: "Pro",  description: "For small teams" },
    { value: "ent",  label: "Enterprise", description: "SSO, audit log, SLA" },
    { value: "legacy", label: "Legacy (unavailable)", disabled: true },
  ]}
/>

Composable

Pass <Radio> children instead of options when you need custom layout or content per option. The selected value and grouping still come from RadioGroup. 

import { useState } from "react";
import { RadioGroup, Radio } from "@usevyre/react";

const [val, setVal] = useState("b");

<RadioGroup value={val} onChange={setVal} orientation="horizontal">
  <Radio value="a" label="Option A" />
  <Radio value="b" label="Option B" />
  <Radio value="c" label="Option C" />
</RadioGroup>

RadioGroup props

Props

Prop Type Default Description
value / v-model string — Selected value (controlled). React: value + onChange; Vue: v-model.
defaultValue string — Initial value for uncontrolled use (React only).
onChange / @update:modelValue (value: string) => void — Called with the newly selected value.
name string auto Radio input name; auto-generated if omitted.
disabled boolean false Disables the entire group.
size "sm" | "md" "md" Control size.
orientation "vertical" | "horizontal" "vertical" Layout direction.
options { value; label?; description?; disabled? }[] — Data-driven options. Omit to pass <Radio> children instead.

Radio props

Props

Prop Type Default Description
value string — This option's value (required). Must be unique in the group.
label string — Visible label.
description string — Secondary muted text under the label.
disabled boolean false Disables just this option.
← Progress Select →