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 will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<'light' | 'dark' | 'auto'>('light')
</script>

<template>
  <TxFlatRadio v-model="value">
    <TxFlatRadioItem value="light" label="Light" />
    <TxFlatRadioItem value="dark" label="Dark" />
    <TxFlatRadioItem value="auto" label="Auto" />
  </TxFlatRadio>
</template>

Sizes

Supports sm, md (default), and lg sizes.

FlatRadio (sizes)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const sm = ref('a')
const md = ref('a')
const lg = ref('a')
</script>

<template>
  <TxFlatRadio v-model="sm" size="sm">
    <TxFlatRadioItem value="a" label="Option A" />
    <TxFlatRadioItem value="b" label="Option B" />
    <TxFlatRadioItem value="c" label="Option C" />
  </TxFlatRadio>

  <TxFlatRadio v-model="md" size="md">
    <TxFlatRadioItem value="a" label="Option A" />
    <TxFlatRadioItem value="b" label="Option B" />
    <TxFlatRadioItem value="c" label="Option C" />
  </TxFlatRadio>

  <TxFlatRadio v-model="lg" size="lg">
    <TxFlatRadioItem value="a" label="Option A" />
    <TxFlatRadioItem value="b" label="Option B" />
    <TxFlatRadioItem value="c" label="Option C" />
  </TxFlatRadio>
</template>

Icons

Use the icon prop to add icons to options (CSS class, e.g. UnoCSS icons).

FlatRadio (icon)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('grid')
</script>

<template>
  <TxFlatRadio v-model="value">
    <TxFlatRadioItem value="grid" icon="i-carbon-grid" label="Grid" />
    <TxFlatRadioItem value="list" icon="i-carbon-list" label="List" />
    <TxFlatRadioItem value="kanban" icon="i-carbon-column" label="Kanban" />
  </TxFlatRadio>
</template>

Disabled State

Supports both group-level and item-level disabling.

FlatRadio (disabled)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('a')
</script>

<template>
  <!-- Item disabled -->
  <TxFlatRadio v-model="value">
    <TxFlatRadioItem value="a" label="Option A" />
    <TxFlatRadioItem value="b" label="Option B" disabled />
    <TxFlatRadioItem value="c" label="Option C" />
  </TxFlatRadio>

  <!-- Group disabled -->
  <TxFlatRadio v-model="value" disabled>
    <TxFlatRadioItem value="a" label="Option A" />
    <TxFlatRadioItem value="b" label="Option B" />
    <TxFlatRadioItem value="c" label="Option C" />
  </TxFlatRadio>
</template>

Bordered

Set the bordered prop to add an outer border.

FlatRadio (bordered)

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('a')
</script>

<template>
  <TxFlatRadio v-model="value" bordered>
    <TxFlatRadioItem value="a" label="Option A" />
    <TxFlatRadioItem value="b" label="Option B" />
    <TxFlatRadioItem value="c" label="Option C" />
  </TxFlatRadio>
</template>

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
`Enter` / `Space`	In `multiple` mode, toggle the currently focused item

API

TxFlatRadio

Props

Prop	Description	Type	Default
modelValue / v-model	Selected value in single mode, or selected value array in `multiple` mode.	`string \| number \| (string \| number)[]`	-
multiple	Enables checkbox-like multi-select behavior. The sliding single-select indicator is hidden in this mode.	`boolean`	`false`
disabled	Disables the entire group, removes focusability, and blocks keyboard changes.	`boolean`	`false`
size	Size variant	`'sm' \| 'md' \| 'lg'`	`'md'`
bordered	Adds an outer border around the selector.	`boolean`	`false`

Events

Event	Description	Params
update:modelValue	Emitted with the next selected value or selected value array.	`(value: string \| number \| (string \| number)[]) => void`
change	Emitted with the same payload after a selection change.	`(value: string \| number \| (string \| number)[]) => void`

Slots

Slot	Description
default	`TxFlatRadioItem` children

TxFlatRadioItem

Props

Prop	Description	Type	Default
value	Item value used by the parent model.	`string \| number`	-
label	Fallback visible text when no default slot is provided.	`string`	-
icon	Fallback icon CSS class when no `icon` slot is provided.	`string`	-
disabled	Disables this item and skips it during keyboard navigation.	`boolean`	`false`

Slots

Slot	Description
default	Custom visible item content, replacing `label`.
icon	Custom icon content, replacing the `icon` class.