FlatRadio | Tuff Docs

Key	Behavior
`→` / `↓`	Next enabled item (wraps)
`←` / `↑`	Previous enabled item (wraps)
`Home`	First enabled item
`End`	Last enabled item
`Enter` / `Space`	Toggles the current item in `multiple` mode

Use for two to five short options that benefit from side-by-side comparison (labels don't wrap); use TxSelect for more.
Use xl when the control is the primary choice on screen; keep the default md inline and in toolbars.
Don't bold custom slot content only when selected: every item already carries the selected weight, and extra bold reflows the row.
Use multiple only for independent values; otherwise use switches or checkboxes.
Keep value stable across renders: the parent registers items by value for thumb placement and keyboard order.

API Reference

Prop	Type	Default	Description
`modelValue` / `v-model`	`string \| number \| (string \| number)[]`	required	A single value, or an array in `multiple` mode.
`multiple`	`boolean`	`false`	Multi-select: items toggle like checkboxes and the thumb is hidden.
`disabled`	`boolean`	`false`	Disables the whole group, removing it from the tab order and blocking changes.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size.
`bordered`	`boolean`	`false`	Adds an outer border.

Event	Params	Description
`update:modelValue`	`(value: string \| number \| (string \| number)[]) => void`	Fires with the new value after a selection change.
`change`	`(value: string \| number \| (string \| number)[]) => void`	Fires together with `update:modelValue`.

Slot	Description
`default`	`TxFlatRadioItem` children.

Prop	Type	Default	Description
`value`	`string \| number`	required	The item's value, registered with the parent.
`label`	`string`	-	Text shown when there is no default slot.
`icon`	`string`	-	Icon class used when there is no `icon` slot.
`disabled`	`boolean`	`false`	Disables the item and skips it in keyboard navigation.

Slot	Description
`default`	Custom content, replacing `label`.
`icon`	Custom icon, replacing `icon`.

Single mode renders role="radiogroup" with role="radio" items; multiple renders role="group" with role="checkbox" items.
Only the container is tabbable; items keep tabindex="-1". Name the group with nearby field text or an external label.
In single mode the arrow keys select directly; in multiple mode they only move focus, and Enter / Space toggles.
The thumb never scales. It lands in place on mount, resize, and item registration, glides to a new selection, and never leaves the track.
A press scales the label and icon, never the item box.
Under reduced motion, the thumb lands in place and the press scale is dropped; the fade stays.

The thumb runs on the glide material of the shared useJellyIndicator (as in TxTabs, TxTabBar, and TxSidebarNav), writing transform, width, and opacity each frame without re-rendering.
Source: packages/tuffex/packages/components/src/flat-radio/.

packages/tuffex/packages/components/src/flat-radio/index.ts

CSS variable	Used for
`--tx-flat-radio-track-bg`	Track fill; defaults to `--tx-fill-color`.
`--tx-flat-radio-indicator-bg`	Thumb and multi-select item fill; defaults to `--tx-surface-raised`.
`--tx-flat-radio-indicator-shadow`	Thumb shadow.