Menu
Documentation

Radio Card

The TairoRadioCard component is a versatile radio input that combines the functionality of a radio button with the visual appeal of a card. It's built on top of Reka UI's RadioGroupItem and provides additional styling options through Shuriken UI's design system.

Example

Company type
Show code
vue
<script setup lang="ts">
const value = ref('team_member_1')
</script>

<template>
  <BaseField label="Company type">
    <BaseRadioGroup
      v-model="value"
      class="grid gap-4 lg:grid-cols-3"
    >
      <TairoRadioCard
        value="team_member_1"
        icon="solar:home-2-linear"
        label="Solo"
        subtitle="Small company"
        variant="muted"
      />
      <TairoRadioCard
        value="team_member_2"
        icon="solar:shop-linear"
        label="LLC"
        subtitle="Medium company"
        variant="muted"
      />
      <TairoRadioCard
        value="team_member_3"
        icon="solar:buildings-linear"
        label="Corp"
        subtitle="Bigger company"
        variant="muted"
      />
    </BaseRadioGroup>
  </BaseField>
</template>

Components

TairoRadioCard

RadioGroupItem
Prop Type
as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

class
default:-
unknown
disabled
default:-
boolean

When `true`, prevents the user from interacting with the radio item.

icon
default:-
string
id
default:-
string
key
default:-
PropertyKey
label
default:-
string
name
default:-
string

The name of the field. Submitted with its owning form as part of a name/value pair.

ref
default:-
VNodeRef
ref-for
default:-
boolean
ref-key
default:-
string
required
default:-
boolean

When `true`, indicates that the user must set the value before the owning form can be submitted.

rounded
default:"sm"
BaseCardProps
style
default:-
unknown
subtitle
default:-
string
value
default:-
AcceptableValue

The value given as data when submitted with a `name`.

variant
default:"default"
BaseCardProps
Event Emitted Value Type
select
[event: any]
Slot Type
#default
{}
#indicator
{}