Radio
`TxRadioGroup` + `TxRadio`****+********
Radio
TxRadioGroup + TxRadio****+********
Standard Single-Select
Standard single-select with a dot + label, good for many options.
Radio (standard)
Interactive preview paused.
Card Single-Select Style
Single-select emphasizing hierarchy, good for explanatory text.
Radio (card)
Interactive preview paused.
Button Group Style
Compact button group, good for few options.
Radio (simple)
Interactive preview paused.
Indicator Animation
Button group animation with indicator: default → normal → blur → glass.
Radio (indicator)
Interactive preview paused.
Disabled State
Radio (disabled)
Interactive preview paused.
Playground
A control panel for TxRadioGroup props to quickly validate variants/params.
RadioGroup (playground)
Interactive preview paused.
API
TxRadioGroup
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| modelValue / v-model | Selected radio value. | string | number | - |
| disabled | Disables all radios in the group and blocks keyboard selection. | boolean | false |
| type | Visual style shared by child radios. | 'button' | 'standard' | 'card' | 'button' |
| direction | Layout direction. button always resolves to row, standard defaults to row, and card defaults to column. | 'row' | 'column' | - |
| indicatorVariant | Button-group indicator style. When omitted, glass maps to glass, blur maps to blur, otherwise solid is used. | 'solid' | 'outline' | 'glass' | 'blur' | - |
| glass | Shortcut for the glass button indicator variant. | boolean | false |
| blur | Shortcut for the blur button indicator variant. | boolean | false |
| updateOnSettled | For button groups, delays v-model/change emission until the animated indicator settles. Defaults to enabled for glass or blur indicators. | boolean | - |
| stiffness | Spring stiffness for button indicator motion. Higher values settle faster. | number | 110 |
| damping | Spring damping for button indicator motion. Lower values feel more elastic. | number | 12 |
| blurAmount | Backdrop blur strength for the blur indicator. | number | 1 |
| elastic | Enables stretch/impact motion on the button indicator. | boolean | true |
Events
| Event | Description | Params |
|---|---|---|
| update:modelValue | v-model update emitted when an enabled child radio selects a new value. | (value: string | number) => void |
| change | Emitted with the selected value after an enabled selection. | (value: string | number) => void |
Keyboard
| Key | Behavior |
|---|---|
| ArrowRight / ArrowDown | Select the next enabled radio. |
| ArrowLeft / ArrowUp | Select the previous enabled radio. |
| Home / End | Select the first / last enabled radio. |
TxRadio
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| value | Value written to the parent TxRadioGroup when selected. | string | number | - |
| label | Fallback visible label when no default slot is provided. | string | '' |
| disabled | Disables this radio and removes it from group keyboard navigation. | boolean | false |
| type | Standalone visual style when the radio is not controlled by a group; grouped radios inherit the group type. | 'button' | 'standard' | 'card' | 'button' |
Events
| Event | Description | Params |
|---|---|---|
| click | Emitted after an enabled, unchecked radio selects itself through the parent group. | (value: string | number) => void |
Components