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.
<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>
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 | {} |