FlatRadio
Inline flat selector for 2-5 options (`TxFlatRadio` + `TxFlatRadioItem`). Provides sliding indicator animation, keyboard navigation, and full TypeScript support.
FlatRadio
Inline flat selector for 2-5 options (TxFlatRadio + TxFlatRadioItem). More direct than dropdown selectors, more compact than Radio.
Basic Usage
The simplest flat selector, ideal for a small number of options.
FlatRadio (basic)
Demo loads on client.
Sizes
Supports sm, md (default), and lg sizes.
FlatRadio (sizes)
Demo loads on client.
Icons
Use the icon prop to add icons to options (CSS class, e.g. UnoCSS icons).
FlatRadio (icon)
Demo loads on client.
Disabled State
Supports both group-level and item-level disabling.
FlatRadio (disabled)
Demo loads on client.
Bordered
Set the bordered prop to add an outer border.
FlatRadio (bordered)
Demo loads on client.
Keyboard Navigation
When the container is focused:
| Key | Behavior |
|---|---|
→ / ↓ | Select next non-disabled item (wraps) |
← / ↑ | Select previous non-disabled item (wraps) |
Home | Select first non-disabled item |
End | Select last non-disabled item |
API
TxFlatRadio
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| modelValue / v-model | Bound value | string | number | - |
| disabled | Disable entire group | boolean | false |
| size | Size variant | 'sm' | 'md' | 'lg' | 'md' |
| bordered | Show outer border | boolean | false |
Events
| Event | Description | Params |
|---|---|---|
| update:modelValue | Emitted when value updates | (value: string | number) => void |
| change | Emitted when value changes | (value: string | number) => void |
Slots
| Slot | Description |
|---|---|
| default | TxFlatRadioItem children |
TxFlatRadioItem
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| value | Item value | string | number | - |
| label | Display text | string | - |
| icon | Icon CSS class | string | - |
| disabled | Disable this item | boolean | false |
Slots
| Slot | Description |
|---|---|
| default | Custom content (overrides label) |
| icon | Custom icon |
Was this helpful?