Radio
YhRadio, YhRadioGroup, and YhRadioButton are used to pick a single value from a set of choices. They support standalone usage, grouped usage, option list rendering, button style mode, and token-based theming.
Select a single option from a set of mutually exclusive choices.
Basic Usage
Use YhRadioGroup with multiple YhRadio children for standard single-choice selection.
Disabled State
You can disable the whole group or a single radio item.
Disable entire group:
Disable individual:
Standalone Usage
YhRadio can also be used without a group by binding v-model directly.
With Border
Use border to render bordered radios.
Different Sizes
size is supported by both standalone radios and group inheritance.
Render by Options
YhRadioGroup can render radios from the options prop when you do not need custom slot content.
Button Style
Use YhRadioButton for segmented button-like choices.
Button Colors
When using radio buttons, fill and text-color from the group control the checked visual state.
Button Disabled and Sizes
Use in Nuxt
After installing @yh-ui/nuxt, YhRadio, YhRadioGroup, and YhRadioButton can be used directly in Nuxt 3/4 pages and components. The checked state renders correctly in SSR and continues to work after hydration.
API
Radio Props
| Prop | Description | Type | Default |
|---|---|---|---|
model-value / v-model | Bound value in standalone mode | YhRadioValueType | undefined |
value | Current radio value. In practice, the change path emits value; omitting it can lead to undefined being emitted even though checked-state comparison falls back to label. | YhRadioValueType | undefined |
name | Native name attribute | string | undefined |
label | Fallback text when the default slot is not used | string | undefined |
size | Radio size | 'large' | 'default' | 'small' | undefined |
disabled | Disable the radio | boolean | false |
border | Show bordered style | boolean | false |
id | Native id attribute | string | undefined |
tabindex | Native tabindex attribute | string | number | undefined |
theme-overrides | Component theme override variables | ComponentThemeVars | undefined |
Radio Events
| Event | Description | Parameters |
|---|---|---|
update:modelValue | Triggered when the standalone bound value changes | (value: YhRadioValueType) => void |
change | Triggered when the standalone bound value changes | (value: YhRadioValueType) => void |
Radio Slots
| Slot | Description | Parameters |
|---|---|---|
default | Radio label content | - |
Radio Expose
| Name | Description | Type |
|---|---|---|
ref | Native radio input element reference | HTMLInputElement | undefined |
focus | Focus the radio input | () => void |
blur | Blur the radio input | () => void |
RadioButton Props
| Prop | Description | Type | Default |
|---|---|---|---|
model-value / v-model | Bound value in standalone mode | YhRadioValueType | undefined |
value | Current radio button value. If omitted, checked-state and emitted value both fall back to label. | YhRadioValueType | undefined |
name | Native name attribute | string | undefined |
label | Fallback text when the default slot is not used | string | undefined |
size | Radio button size | 'large' | 'default' | 'small' | undefined |
disabled | Disable the radio button | boolean | false |
id | Native id attribute | string | undefined |
tabindex | Native tabindex attribute | string | number | undefined |
theme-overrides | Component theme override variables | ComponentThemeVars | undefined |
RadioButton Events
| Event | Description | Parameters |
|---|---|---|
update:modelValue | Triggered when the standalone bound value changes | (value: YhRadioValueType) => void |
change | Triggered when the standalone bound value changes | (value: YhRadioValueType) => void |
RadioButton Slots
| Slot | Description | Parameters |
|---|---|---|
default | Radio button label content | - |
RadioButton Expose
| Name | Description | Type |
|---|---|---|
ref | Native radio input element reference | HTMLInputElement | undefined |
focus | Focus the radio button input | () => void |
blur | Blur the radio button input | () => void |
RadioGroup Props
| Prop | Description | Type | Default |
|---|---|---|---|
model-value / v-model | Bound value | YhRadioValueType | undefined |
options | Optional option list rendered by the group | YhRadioGroupOption[] | undefined |
size | Group size inherited by child radios | 'large' | 'default' | 'small' | undefined |
disabled | Disable the whole group | boolean | false |
name | Native name attribute passed to child radios | string | undefined |
validate-event | Trigger form validation when the group value changes | boolean | true |
text-color | Checked text color in radio button mode | string | undefined |
fill | Checked background and border color in radio button mode | string | undefined |
tag | Wrapper tag or component | string | Component | 'div' |
theme-overrides | Component theme override variables | ComponentThemeVars | undefined |
RadioGroup Events
| Event | Description | Parameters |
|---|---|---|
update:modelValue | Triggered when the group value changes | (value: YhRadioValueType) => void |
change | Triggered when the group value changes | (value: YhRadioValueType) => void |
RadioGroup Slots
| Slot | Description | Parameters |
|---|---|---|
default | Custom group content | - |
When the default slot is empty and options is provided, the group renders YhRadio items from options.
RadioGroup Expose
This component does not expose public instance methods or properties.
Type Exports
| Type | Description |
|---|---|
YhRadioProps | Radio props type |
YhRadioEmits | Radio emits type |
YhRadioSlots | Radio slots type |
YhRadioExpose | Radio expose type |
YhRadioGroupProps | Radio group props type |
YhRadioGroupEmits | Radio group emits type |
YhRadioGroupOption | Radio group option item type |
YhRadioButtonProps | Radio button props type |
YhRadioButtonEmits | Radio button emits type |
YhRadioButtonExpose | Radio button expose type |
YhRadioValueType | Shared value type |
YhRadioInstance | Radio instance type |
YhRadioGroupInstance | Radio group instance type |
YhRadioButtonInstance | Radio button instance type |
Theme Variables
YhRadio, YhRadioGroup, and YhRadioButton support themeOverrides. YhRadioGroup.themeOverrides is also inherited by child radios through injection.
Radio-related dedicated CSS variables:
| Variable | Description | Default |
|---|---|---|
--yh-radio-size | Radio control size | 14px |
--yh-radio-input-border | Radio border color | var(--yh-border-color) |
--yh-radio-checked-bg-color | Checked background color | var(--yh-color-primary) |
--yh-radio-checked-border-color | Checked border color | var(--yh-color-primary) |
--yh-radio-checked-icon-color | Checked icon color token | var(--yh-color-primary) |
--yh-radio-text-color | Label text color | var(--yh-text-color-regular) |
Radio button dedicated CSS variables:
| Variable | Description | Default |
|---|---|---|
--yh-radio-button-font-size | Button font size | var(--yh-font-size-base) |
--yh-radio-button-text-color | Button text color | var(--yh-text-color-regular) |
--yh-radio-button-bg-color | Button background color | var(--yh-fill-color-blank) |
--yh-radio-button-border-color | Button border color | var(--yh-border-color) |
--yh-radio-button-hover-text-color | Hover text color | var(--yh-color-primary) |
--yh-radio-button-checked-bg-color | Checked background color | var(--yh-color-primary) |
--yh-radio-button-checked-border-color | Checked border color | var(--yh-color-primary) |
--yh-radio-button-checked-text-color | Checked text color | #ffffff |
--yh-radio-button-disabled-bg-color | Disabled background color | var(--yh-fill-color-light) |
--yh-radio-button-disabled-border-color | Disabled border color | var(--yh-border-color-light) |
--yh-radio-button-disabled-text-color | Disabled text color | var(--yh-text-color-placeholder) |