Radio tile
A radio tile is a card-style Radio for prominent, fully visible choices. Each option carries an icon, a label and a short description. Place the tiles inside a Radio group just like regular radios; the group handles selection and state.
TIP
Tiles fill the group's width when stacked. Add is-inline to the Radio group to lay them out in equal columns, best for two or three options. You can mix tiles and regular Radios in the same group when one option is less prominent.
Props
value: string | number | boolean
The value of the tile, bound to the radio group's model.
label?: string
The label of the tile.
sub-label?: string
A secondary line of text shown below the label.
icon?: FluxIconName
An icon shown at the start of the tile.
disabled?: boolean
If the tile is disabled.
Slots
default
The label content of the tile. Falls back to the label prop.
Examples
Stacked
Card-style radios stacked at full width.
<template>
<FluxPane style="max-width: 411px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Payment method">
<FluxFormRadioGroup v-model="method">
<FluxFormRadioTile
value="card"
icon="money-bill"
label="Card"
sub-label="Pay with a saved or new card."/>
<FluxFormRadioTile
value="bank"
icon="building-columns"
label="Bank transfer"
sub-label="Pay directly from your bank."/>
</FluxFormRadioGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormField, FluxFormRadioGroup, FluxFormRadioTile, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const method = ref('card');
</script>Inline
Tiles laid out in equal columns with is-inline.
<template>
<FluxPane style="max-width: 519px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="How often?">
<FluxFormRadioGroup
v-model="frequency"
is-inline>
<FluxFormRadioTile
value="once"
icon="bolt"
label="One-time"
sub-label="Add credit just this once."/>
<FluxFormRadioTile
value="recurring"
icon="rotate"
label="Recurring"
sub-label="Top up automatically each cycle."/>
</FluxFormRadioGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormField, FluxFormRadioGroup, FluxFormRadioTile, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const frequency = ref('once');
</script>Without description
Compact tiles with just an icon and label, no sub-label.
<template>
<FluxPane style="max-width: 489px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Plan">
<FluxFormRadioGroup
v-model="plan"
is-inline>
<FluxFormRadioTile
value="free"
icon="user"
label="Free"/>
<FluxFormRadioTile
value="pro"
icon="star"
label="Pro"/>
<FluxFormRadioTile
value="team"
icon="users"
label="Team"/>
</FluxFormRadioGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormField, FluxFormRadioGroup, FluxFormRadioTile, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const plan = ref('pro');
</script>Shipping method
A real-world group with a description and price per option.
<template>
<FluxPane style="max-width: 441px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Shipping method">
<FluxFormRadioGroup v-model="shipping">
<FluxFormRadioTile
value="standard"
icon="truck"
label="Standard"
sub-label="Arrives in 5–7 business days. Free."/>
<FluxFormRadioTile
value="express"
icon="bolt"
label="Express"
sub-label="Arrives in 2 business days. $12."/>
<FluxFormRadioTile
value="overnight"
icon="rocket"
label="Overnight"
sub-label="Arrives the next business day. $29."/>
</FluxFormRadioGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormField, FluxFormRadioGroup, FluxFormRadioTile, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const shipping = ref('standard');
</script>