arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(RadioGroup): new component (#41)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-04-02 11:35:16 +02:00
committed by GitHub
parent 80a3a0c28f
commit e29b514f8d
11 changed files with 932 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
playground/app.vue
View File

@@ -25,6 +25,7 @@ const components = [
'modal',
'navigation-menu',
'popover',
'radio-group',
'skeleton',
'slideover',
'switch',

92
playground/components/FormElementsExample.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup lang="ts">
import { z } from 'zod'
import type { FormSubmitEvent } from '#ui/types/form'
const form = ref()
const state = reactive({
input: undefined,
inputMenu: undefined,
textarea: undefined,
select: undefined,
selectMenu: undefined,
checkbox: undefined,
toggle: undefined,
radio: undefined,
radioGroup: undefined,
switch: undefined,
range: undefined
})
const schema = z.object({
input: z.string().min(10),
// inputMenu: z.any().refine(option => option?.value === 'option-2', {
// message: 'Select Option 2'
// }),
textarea: z.string().min(10),
// select: z.string().refine(value => value === 'option-2', {
// message: 'Select Option 2'
// }),
// selectMenu: z.any().refine(option => option?.value === 'option-2', {
// message: 'Select Option 2'
// }),
// toggle: z.boolean().refine(value => value === true, {
// message: 'Toggle me'
// }),
checkbox: z.boolean().refine(value => value === true, {
message: 'Check me'
}),
radioGroup: z.string().refine(value => value === 'option-2', {
message: 'Select Option 2'
})
// range: z.number().max(20, { message: 'Must be less than 20' })
})
type Schema = z.output<typeof schema>
const options = [
{ label: 'Option 1', value: 'option-1' },
{ label: 'Option 2', value: 'option-2' },
{ label: 'Option 3', value: 'option-3' }
]
function onSubmit (event: FormSubmitEvent<Schema>) {
console.log(event.data)
}
</script>
<template>
<UForm
ref="form"
:state="state"
:schema="schema"
class="gap-4 flex flex-col w-60"
@submit="onSubmit"
>
<UFormField label="Input" name="input">
<UInput v-model="state.input" placeholder="john@lennon.com" />
</UFormField>
<UFormField label="Text area" name="textarea">
<UTextarea v-model="state.textarea" />
</UFormField>
<UFormField name="checkbox">
<UCheckbox v-model="state.checkbox" label="I accept the terms and conditions" />
</UFormField>
<UFormField name="radioGroup">
<URadioGroup v-model="state.radioGroup" legend="Radio group" :options="options" />
</UFormField>
<div class="flex gap-2">
<UButton color="gray" type="submit">
Submit
</UButton>
<UButton variant="outline" @click="form.clear()">
Clear
</UButton>
</div>
</UForm>
</template>

1
playground/pages/form.vue
View File

@@ -116,6 +116,7 @@ function onSubmit (event: FormSubmitEvent<User>) {
<div class="flex gap-4">
<FormNestedExample />
<FormNestedListExample />
<FormElementsExample />
</div>
</div>
</template>

60
playground/pages/radio-group.vue Normal file
View File

@@ -0,0 +1,60 @@
<script setup lang="ts">
import theme from '#build/ui/checkbox'
const sizes = Object.keys(theme.variants.size)
const literalOptions = [
'Option 1',
'Option 2',
'Option 3'
]
const options = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]
const optionsWithDescription = [
{ value: '1', label: 'Option 1', description: 'Description 1' },
{ value: '2', label: 'Option 2', description: 'Description 2' },
{ value: '3', label: 'Option 3', description: 'Description 3' }
]
</script>
<template>
<div class="flex flex-col items-center gap-4">
<div class="flex flex-col gap-4 ml-[-142px]">
<URadioGroup :options="options" default-value="1" />
<URadioGroup :options="literalOptions" />
<URadioGroup :options="options" label="Disabled" disabled />
<URadioGroup :options="options" color="red" default-value="1" />
<URadioGroup :options="options" orientation="horizontal" />
</div>
<div class="flex items-center gap-4">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="options" />
</div>
<div class="flex items-center gap-4 ml-[75px]">
<URadioGroup v-for="size in sizes" :key="size" :size="(size as any)" :options="optionsWithDescription" />
</div>
<div class="flex gap-4 ml-[-142px]">
<URadioGroup :options="options" legend="Legend" />
<URadioGroup :options="options" legend="Legend" required />
<URadioGroup :options="options">
<template #legend>
<span class="italic font-bold">
With slots
</span>
</template>
<template #label="{ option }">
<span class="italic">
{{ option.label }}
</span>
</template>
</URadioGroup>
</div>
</div>
</template>

3
src/runtime/components/Checkbox.vue
View File

@@ -68,6 +68,9 @@ const checked = computed({
}
})
// FIXME: I think there's a race condition between this and the v-model event.
// This must be triggered after the value updates, otherwise the form validates
// the previous value.
function onChecked () {
emitFormChange()
}

2
src/runtime/components/DropdownMenu.vue
View File

@@ -10,8 +10,6 @@ const appConfig = _appConfig as AppConfig & { ui: { dropdownMenu: Partial<typeof
const dropdownMenu = tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu || {}) })
export type DropdownMenuUI = typeof dropdownMenu
export interface DropdownMenuItem extends Omit<LinkProps, 'type'> {
label?: string
icon?: IconProps['name']

138
src/runtime/components/RadioGroup.vue Normal file
View File

@@ -0,0 +1,138 @@
<script lang="ts">
import { tv, type VariantProps } from 'tailwind-variants'
import type { RadioGroupRootProps, RadioGroupRootEmits } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema'
import _appConfig from '#build/app.config'
import theme from '#build/ui/radioGroup'
const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
const radioGroup = tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup || {}) })
type RadioGroupVariants = VariantProps<typeof radioGroup>
export type RadioGroupOption<T> = {
label: string
value: T
description: string
}
export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir'> {
name?: string
legend?: string
options?: string[] | RadioGroupOption<T>[]
disabled?: boolean
class?: any
size?: RadioGroupVariants['size']
color?: RadioGroupVariants['color']
ui?: Partial<typeof radioGroup.slots>
}
export type RadioGroupEmits = {
change: [value: any]
} & RadioGroupRootEmits
export interface RadioGroupSlots<T> {
legend(): any
label(props: { option: RadioGroupOption<T> }): any
description(props: { option: RadioGroupOption<T>}): any
}
</script>
<script setup lang="ts" generic="T extends string | undefined">
import { computed } from 'vue'
import { useId, useFormField } from '#imports'
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardPropsEmits } from 'radix-vue'
import { reactivePick } from '@vueuse/core'
const props = defineProps<RadioGroupProps<T>>()
const emits = defineEmits<RadioGroupEmits>()
defineSlots<RadioGroupSlots<T>>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'orientation', 'disabled', 'loop', 'name', 'required'), emits)
const { emitFormChange, color, name, size, inputId: _inputId } = useFormField<RadioGroupProps<T>>(props)
const inputId = _inputId.value ?? useId()
const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
size: size.value,
color: color.value,
disabled: props.disabled,
required: props.required
}))
function normalizeOption (option: any) {
if (['string', 'number', 'boolean'].includes(typeof option)) {
return {
id: `${inputId}:${option}`,
value: option,
label: option
}
}
return {
...option,
id: `${inputId}:${option.value}`
}
}
const normalizedOptions = computed(() => {
if (!props.options) return []
return props.options.map(normalizeOption)
})
const modelValue = defineModel<T>({
set (value) {
emits('change', value)
return value
}
})
// FIXME: I think there's a race condition between this and the v-model event.
// This must be triggered after the value updates, otherwise the form validates
// the previous value.
function onUpdate () {
emitFormChange()
}
</script>
<template>
<RadioGroupRoot
:id="inputId"
v-model="modelValue"
v-bind="rootProps"
:name="name"
:class="ui.root({ class: props.class })"
@update:model-value="onUpdate"
>
<fieldset :class="ui.fieldset()">
<legend v-if="legend || $slots.legend" :class="ui.legend()">
<slot name="legend">
{{ legend }}
</slot>
</legend>
<div v-for="option in normalizedOptions" :key="option.value" :class="ui.option()">
<div :class="ui.container()">
<RadioGroupItem
:id="option.id"
:value="option.value"
:class="ui.base()"
>
<RadioGroupIndicator :class="ui.indicator()" />
</RadioGroupItem>
</div>
<div :class="ui.wrapper()">
<Label :class="ui.label()" :for="option.id">
<slot name="label" v-bind="{ option }">{{ option.label }}</slot>
</Label>
<p v-if="option.description || $slots.description" :class="ui.description()">
<slot name="description" v-bind="{ option }">
{{ option.description }}
</slot>
</p>
</div>
</div>
</fieldset>
</RadioGroupRoot>
</template>

3
src/theme/index.ts
View File

@@ -17,9 +17,10 @@ export { default as link } from './link'
export { default as modal } from './modal'
export { default as navigationMenu } from './navigationMenu'
export { default as popover } from './popover'
export { default as radioGroup } from './radioGroup'
export { default as skeleton } from './skeleton'
export { default as slideover } from './slideover'
export { default as switch } from './switch'
export { default as tabs } from './tabs'
export { default as tooltip } from './tooltip'
export { default as textarea } from './textarea'
export { default as tooltip } from './tooltip'

86
src/theme/radioGroup.ts Normal file
View File

@@ -0,0 +1,86 @@
export default (config: { colors: string[] }) => ({
slots: {
root: 'relative',
fieldset: 'flex flex-col',
legend: 'mb-1 block font-medium text-gray-700 dark:text-gray-200',
option: 'flex items-start',
base: 'rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-white dark:focus-visible:outline-offset-gray-900',
indicator: 'flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-gray-900 after:rounded-full',
container: 'flex items-center',
wrapper: 'ms-2',
label: 'block font-medium text-gray-700 dark:text-gray-200',
description: 'text-gray-500 dark:text-gray-400'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [
color, {
base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
indicator: `bg-${color}-500 dark:bg-${color}-400`
}
])),
size: {
'2xs': {
fieldset: 'gap-0.5',
base: 'size-3',
option: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
xs: {
fieldset: 'gap-0.5',
base: 'size-3.5',
option: 'text-xs',
container: 'h-4',
indicator: 'after:size-1'
},
sm: {
fieldset: 'gap-1',
base: 'size-4',
option: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
md: {
fieldset: 'gap-1',
base: 'size-[18px]',
option: 'text-sm',
container: 'h-5',
indicator: 'after:size-1.5'
},
lg: {
fieldset: 'gap-1.5',
base: 'size-5',
option: 'text-base',
container: 'h-6',
indicator: 'after:size-2'
},
xl: {
fieldset: 'gap-1.5',
base: 'size-[22px]',
option: 'text-base',
container: 'h-6',
indicator: 'after:size-2'
}
},
disabled: {
true: {
container: 'cursor-not-allowed opacity-75'
}
},
required: {
true: {
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
}
}
},
defaultVariants: {
size: 'sm',
color: 'primary'
}
})

32
test/components/RadioGroup.spec.ts Normal file
View File

@@ -0,0 +1,32 @@
import { describe, it, expect } from 'vitest'
import RadioGroup, { type RadioGroupProps } from '../../src/runtime/components/RadioGroup.vue'
import ComponentRender from '../component-render'
import { defu } from 'defu'
const defaultOptions = [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' },
{ value: '3', label: 'Option 3' }
]
describe('RadioGroup', () => {
it.each([
['basic case', {}],
['with default value', { props: { defaultValue: '1' } }],
['with disabled', { props: { disabled: true } }],
['with description', { props: { options: defaultOptions.map((opt, count) => ({ ...opt, description: `Description ${count}` })) } }],
['with required', { props: { legend: 'Legend', required: true } }],
['with custom color', { props: { color: 'red' as const } }],
['with size 2xs', { props: { size: '2xs' as const } }],
['with size xs', { props: { size: 'xs' as const } }],
['with size sm', { props: { size: 'sm' as const } }],
['with size md', { props: { size: 'md' as const } }],
['with size lg', { props: { size: 'lg' as const } }],
['with size xl', { props: { size: 'xl' as const } }],
['with class', { props: { class: 'bg-red-500' } }],
['with ui', { props: { ui: {} } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: RadioGroupProps<any>, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, defu(options, { props: { options: defaultOptions } }), RadioGroup)
expect(html).toMatchSnapshot()
})
})

517
test/components/__snapshots__/RadioGroup.spec.ts.snap Normal file
View File

@@ -0,0 +1,517 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`RadioGroup > renders basic case correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="0" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="0:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="0:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="0:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="0:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with class correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="12" class="relative bg-red-500" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="12:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="12:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="12:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="12:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with custom color correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="5" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="5:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="5:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 dark:focus-visible:outline-red-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="5:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="5:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with default value correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="1" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="true" id="1:1" role="radio" type="button" aria-checked="true" data-state="checked" required="false" value="1" aria-label="1"><span data-state="checked" class="flex items-center justify-center size-full rounded-full after:bg-white after:rounded-full bg-primary-500 dark:bg-primary-400 after:size-1.5"></span>
<!---->
</button></div>
<div class="ms-2"><label for="1:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="1:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="1:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="1:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with description correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="3" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<p class="text-gray-500 dark:text-gray-400">Description 0</p>
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<p class="text-gray-500 dark:text-gray-400">Description 1</p>
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<p class="text-gray-500 dark:text-gray-400">Description 2</p>
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="3:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="3:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="3:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="3:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with disabled correctly 1`] = `
"<div role="radiogroup" data-disabled="" required="false" aria-required="false" dir="ltr" tabindex="-1" style="outline-color: none; outline-style: none; outline-width: initial;" id="2" class="relative">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5 cursor-not-allowed opacity-75"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="2:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5 cursor-not-allowed opacity-75"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="2:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5 cursor-not-allowed opacity-75"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" data-disabled="true" id="2:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="2:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with required correctly 1`] = `
"<div role="radiogroup" required="true" aria-required="true" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="4" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<legend class="mb-1 block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Legend</legend>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="4:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="4:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="4:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="true" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="4:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with size 2xs correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="6" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-0.5">
<!--v-if-->
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="6:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="6:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="6:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="6:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with size lg correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="10" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1.5">
<!--v-if-->
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="10:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="10:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="10:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="10:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with size md correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="9" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="9:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="9:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[18px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="9:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="9:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with size sm correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="8" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="8:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="8:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="8:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="8:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with size xl correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="11" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1.5">
<!--v-if-->
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="11:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="11:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-base">
<div class="flex items-center h-6"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-[22px]" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="11:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="11:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with size xs correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="7" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-0.5">
<!--v-if-->
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="7:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="7:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-xs">
<div class="flex items-center h-4"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-3.5" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="7:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="7:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;
exports[`RadioGroup > renders with ui correctly 1`] = `
"<div role="radiogroup" required="false" aria-required="false" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="13" class="relative" tabindex="0">
<fieldset class="flex flex-col gap-1">
<!--v-if-->
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:1" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="1" aria-label="1">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="13:1" class="block font-medium text-gray-700 dark:text-gray-200">Option 1</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:2" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="2" aria-label="2">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="13:2" class="block font-medium text-gray-700 dark:text-gray-200">Option 2</label>
<!--v-if-->
</div>
</div>
<div class="flex items-start text-sm">
<div class="flex items-center h-5"><button class="rounded-full ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 size-4" data-radix-vue-collection-item="" tabindex="-1" data-active="false" id="13:3" role="radio" type="button" aria-checked="false" data-state="unchecked" required="false" value="3" aria-label="3">
<!---->
<!---->
</button></div>
<div class="ms-2"><label for="13:3" class="block font-medium text-gray-700 dark:text-gray-200">Option 3</label>
<!--v-if-->
</div>
</div>
</fieldset>
</div>"
`;