How do you prefer to receive notifications?
<k-radio-group
title="Notifications"
name="notifications"
description="How do you prefer to receive notifications?"
:items="items"
v-model="checked"
/>How do you prefer to receive notifications?
<k-radio-group
title="Notifications"
name="notifications2"
description="How do you prefer to receive notifications?"
:items="items"
variant="horizontal"
v-model="checked"
/><k-radio-group
title="Notifications"
name="notifications3"
variant="vertical-right"
:items="items"
v-model="checked"
/>EmailThis is good
PhoneThis is less good10000 users
Push notificationThis is spammy
No description
<k-radio-group
title="Select a mailing list"
name="notifications4"
variant="cards"
:items="items"
v-model="checked"
/>Select a small card
Learn more1GB
8GB
16GB
32GB
64GB
<k-radio-group
title="Select a small card"
name="notifications5"
variant="small-cards"
learnMoreText="Learn more"
:items="smallItems"
v-model="checked"
/>EmailThis is good
PhoneThis is less goodside label10000 users
Push notificationThis is spammy
No description
<k-radio-group
title="Select a stacked card"
name="notifications6"
variant="stacked-cards"
:items="items"
v-model="checked"
/>EmailThis is good
PhoneThis is less good10000 users
Push notificationThis is spammy
No description
<k-radio-group
title="Custom wrapper classes"
name="notifications4"
variant="cards"
wrapperClasses="grid grid-cols-2 gap-7"
:items="items"
v-model="checked"
/>EmailThis is good
PhoneThis is less goodside label10000 users
Push notificationThis is spammy
No description
<k-radio-group
title="Select a stacked card"
name="notifications6"
variant="stacked-cards"
:items="items"
v-model="checked">
<template #title>
<h2 class="text-lg font-medium leading-6 text-brand-gray-900">
Custom title
</h2>
</template>
<template v-slot="{ checked, item }">
<div>
{{ `${checked ? 'Checked - ' : ''}${JSON.stringify(item)}` }}
</div>
</template>
</k-radio-group><script setup lang="ts">
import { ref } from 'vue'
const items = [
{ value: '0', label: 'Email', description: 'This is good' },
{
value: '1',
label: 'Phone',
description: 'This is less good',
bottomText: '10000 users',
sideLabel: 'side label',
},
{ value: '2', label: 'Push notification', description: 'This is spammy' },
{ value: '3', label: 'No description' },
]
export const smallItems = [
{ value: '0', label: '1GB', description: 'This is good' },
{
value: '1',
label: '8GB',
},
{ value: '2', label: '16GB', description: 'This is spammy' },
{ value: '3', label: '32GB' },
{ value: '4', label: '64GB', disabled: true },
]
const checked = ref(items[1].value)
</script>