@usevyre/react@usevyre/vue

Radio

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

Options array

The quickest form — pass options withvalue / label / optionaldescription and disabled. Bind withvalue + onChange (or v-model in Vue).

FreeFor hobby projectsProFor small teamsEnterpriseSSO, audit log, SLALegacy (unavailable)

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 },
  ]}
/>

<script setup>
import { ref } from "vue";
import { RadioGroup } from "@usevyre/vue";

const plan = ref("pro");
</script>
<template>
  <RadioGroup
    v-model="plan"
    :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 },
    ]"
  />
</template>

Composable

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

Option AOption BOption C

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>

<script setup>
import { ref } from "vue";
import { RadioGroup, Radio } from "@usevyre/vue";

const val = ref("b");
</script>
<template>
  <RadioGroup v-model="val" orientation="horizontal">
    <Radio value="a" label="Option A" />
    <Radio value="b" label="Option B" />
    <Radio value="c" label="Option C" />
  </RadioGroup>
</template>

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.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`	`md`
`orientation`	`"vertical"`\|`"horizontal"`	`vertical`
`disabled`	`true`\|`false`	`false`

Common AI mistakes

<Radio> used outside a <RadioGroup>→ Always wrap <Radio> in <RadioGroup>
RadioGroup without value/onChange (React) or v-model (Vue)→ Bind value + onChange (React) or v-model (Vue); or defaultValue for uncontrolled in React
Using Checkbox for mutually-exclusive choices→ Use RadioGroup + Radio (or options) for one-of-many

Quick examples

Data-driven

<RadioGroup
  value={plan}
  onChange={setPlan}
  options={[
    { value: "free", label: "Free", description: "For hobby projects" },
    { value: "pro",  label: "Pro",  description: "For teams" },
  ]}
/>

Composable children

<RadioGroup value={plan} onChange={setPlan} orientation="horizontal">
  <Radio value="free" label="Free" />
  <Radio value="pro"  label="Pro" />
</RadioGroup>

← Progress Select →