Radio
`TxRadioGroup` + `TxRadio`****+********
Radio
TxRadioGroup + TxRadio****+********
Standard Single-Select
Standard single-select with a dot + label, good for many options.
Radio (standard)
Demo loads on client.
Card Single-Select Style
Single-select emphasizing hierarchy, good for explanatory text.
Radio (card)
Demo loads on client.
Button Group Style
Compact button group, good for few options.
Radio (simple)
Demo loads on client.
Indicator Animation
Button group animation with indicator: default → normal → blur → glass.
Radio (indicator)
Demo loads on client.
Disabled State
Radio (disabled)
Demo loads on client.
Playground
A control panel for TxRadioGroup props to quickly validate variants/params.
RadioGroup (playground)
Demo loads on client.
API
TxRadioGroup
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| modelValue / v-model | Description for modelValue / v-model. | string | number | - |
| disabled | Description for disabled. | boolean | false |
| type | Description for type. | 'button' | 'standard' | 'card' | 'button' |
| direction | Description for direction. | 'row' | 'column' | - |
| indicatorVariant | Description for indicatorVariant. | 'solid' | 'outline' | 'glass' | 'blur' | - |
| glass | Description for glass. | boolean | false |
| blur | Description for blur. | boolean | false |
| stiffness | Description for stiffness. | number | 110 |
| damping | Description for damping. | number | 12 |
| blurAmount | Description for blurAmount. | number | 1 |
| elastic | Description for elastic. | boolean | true |
Events
| Event | Description | Params |
|---|---|---|
| update:modelValue | Description for update:modelValue. | (value: string | number) => void |
| change | Description for change. | (value: string | number) => void |
TxRadio
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| value | Description for value. | string | number | - |
| label | Description for label. | string | '' |
| disabled | Description for disabled. | boolean | false |
| type | Description for type. | 'button' | 'standard' | 'card' | 'button' |
Events
| Event | Description | Params |
|---|---|---|
| click | Description for click. | (value: string | number) => void |
Was this helpful?