Radio

Radio buttons allow users to select exactly one option from a set of mutually exclusive choices.

TRadioGroup Mode

It is recommended to wrap multiple TRadio components inside TRadioGroup. Bind v-model on the group and the name attribute is automatically passed to children.

Show Code

<TRadioGroup v-model="selected">
  <TRadio value="apple" label="Apple" />
  <TRadio value="banana" label="Banana" />
  <TRadio value="orange" label="Orange" />
</TRadioGroup>

Standalone Mode

Each TRadio can also be used independently. Use a shared name attribute and separate v-model bindings to achieve mutual exclusion.

Show Code

<TRadio v-model="selected" value="male" label="Male" name="gender" />
<TRadio v-model="selected" value="female" label="Female" name="gender" />
<TRadio v-model="selected" value="other" label="Other" name="gender" />

Inline Layout

Use the inline prop to arrange radio buttons horizontally. Can be set on TRadioGroup (applies to all children) or on individual TRadio components.

Show Code

<TRadioGroup v-model="selected" inline>
  <TRadio value="s" label="S" />
  <TRadio value="m" label="M" />
  <TRadio value="l" label="L" />
  <TRadio value="xl" label="XL" />
</TRadioGroup>

Disabled State

Use the disabled prop to disable radio buttons. Can be set on TRadioGroup (disables all) or on individual TRadio components.

Show Code

<TRadioGroup v-model="selected">
  <TRadio value="option1" label="Enabled option" />
  <TRadio value="option2" label="Disabled option" disabled />
  <TRadio value="option3" label="Disabled (default selected)" disabled />
</TRadioGroup>

Validation States

Use the validation prop to set validation state. Pair with .valid-feedback / .invalid-feedback for messages.

Show Code

<TRadioGroup v-model="selected" validation="valid">
  <TRadio value="yes" label="Valid state" />
</TRadioGroup>
<div class="valid-feedback">Correct!</div>

<TRadioGroup v-model="selected" validation="invalid">
  <TRadio value="no" label="Invalid state" />
</TRadioGroup>
<div class="invalid-feedback">Please select an option.</div>

options Mode (Array Generation)

Pass a string array or object array via the options prop to auto-generate TRadio components — no need to write child components manually.

String array: each string serves as both label and value.
Object array: you can specify label, value, and disabled.
Custom rendering: use the #option slot to customize each option's label content.

Show Code

<!-- String array -->
<TRadioGroup v-model="selected" :options="['Apple', 'Banana', 'Orange']" />

<!-- Object array -->
<TRadioGroup v-model="selected" :options="[
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
]" />

<!-- With disabled options -->
<TRadioGroup v-model="selected" :options="[
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana', disabled: true },
]" />

Custom Label (Slot)

Use the default slot to customize the label content — supports rich text and icons.

Show Code

<TRadioGroup v-model="selected">
  <TRadio value="plan-a">
    <strong>Basic Plan</strong>
    <span class="text-secondary ms-1">- For personal use</span>
  </TRadio>
  <TRadio value="plan-b">
    <strong>Pro Plan</strong>
    <span class="text-secondary ms-1">- For team collaboration</span>
  </TRadio>
</TRadioGroup>

API

TRadio Props

Prop	Description	Type	Default
v-model	Binding value (standalone mode only)	string | number | boolean | null	null
value	Option value	string | number | boolean	undefined
label	Label text	string	undefined
name	Group name (required in standalone mode; auto-inherited from Group)	string	undefined
inline	Inline layout	boolean	false
disabled	Disabled state	boolean	false
validation	Validation state	'valid' | 'invalid'	undefined
id	Native id attribute	string	undefined
required	Whether required	boolean	false

TRadioGroup Props

Prop	Description	Type	Default
v-model	Currently selected value	string | number | boolean | null	null
options	Option array (string or object), auto-generates TRadio children	(string | { label: string, value?: any, disabled?: boolean })[]	undefined
name	Group name, auto-applied to child TRadio	string	undefined
inline	Inline layout, auto-applied to child TRadio	boolean	false
disabled	Disable all children	boolean	false
validation	Validation state, auto-applied to child TRadio	'valid' | 'invalid'	undefined

TRadioGroup Emits

Event	Description	Callback
update:modelValue	Triggered when selected value changes	(value: string | number | boolean | null) => void
change	Triggered when selected value changes	(value: string | number | boolean | null) => void

TRadio Slots

Slot	Description
default	Custom label content (replaces label prop)

TRadioGroup Slots

Slot	Description	Scope
default	Custom child items (when options is not set)	—
option	Custom option label (when options is set)	{ option: { label, value, disabled }, checked: boolean }