Radios

<x-radio color="primary" label="primary" name="r_solid_primary" value="1" checked />
<x-radio color="secondary" label="secondary" name="r_solid_secondary" value="1" checked />
<x-radio color="accent" label="accent" name="r_solid_accent" value="1" checked />
<x-radio color="neutral" label="neutral" name="r_solid_neutral" value="1" checked />
<x-radio color="info" label="info" name="r_solid_info" value="1" checked />
<x-radio color="success" label="success" name="r_solid_success" value="1" checked />
<x-radio color="warning" label="warning" name="r_solid_warning" value="1" checked />
<x-radio color="error" label="error" name="r_solid_error" value="1" checked />

<label for="r_solid_primary_1_6a7e9b63ce63a" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_primary_1_6a7e9b63ce63a" class="peer sr-only" name="r_solid_primary" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="r_solid_secondary_1_6a7e9b63ce686" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_secondary_1_6a7e9b63ce686" class="peer sr-only" name="r_solid_secondary" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-secondary-content peer-checked:bg-secondary peer-checked:border-secondary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">secondary</span></span></label>
<label for="r_solid_accent_1_6a7e9b63ce6c3" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_accent_1_6a7e9b63ce6c3" class="peer sr-only" name="r_solid_accent" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-accent-content peer-checked:bg-accent peer-checked:border-accent"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="r_solid_neutral_1_6a7e9b63ce6fd" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_neutral_1_6a7e9b63ce6fd" class="peer sr-only" name="r_solid_neutral" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-neutral-content peer-checked:bg-neutral peer-checked:border-neutral"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="r_solid_info_1_6a7e9b63ce735" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_info_1_6a7e9b63ce735" class="peer sr-only" name="r_solid_info" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-info-content peer-checked:bg-info peer-checked:border-info"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">info</span></span></label>
<label for="r_solid_success_1_6a7e9b63ce76d" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_success_1_6a7e9b63ce76d" class="peer sr-only" name="r_solid_success" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-success-content peer-checked:bg-success peer-checked:border-success"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="r_solid_warning_1_6a7e9b63ce7a3" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_warning_1_6a7e9b63ce7a3" class="peer sr-only" name="r_solid_warning" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-warning-content peer-checked:bg-warning peer-checked:border-warning"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">warning</span></span></label>
<label for="r_solid_error_1_6a7e9b63ce7d9" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_error_1_6a7e9b63ce7d9" class="peer sr-only" name="r_solid_error" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-error-content peer-checked:bg-error peer-checked:border-error"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">error</span></span></label>

<x-radio appearance="soft" color="primary" label="primary" name="r_soft_primary" value="1" checked />
<x-radio appearance="soft" color="secondary" label="secondary" name="r_soft_secondary" value="1" checked />
<x-radio appearance="soft" color="accent" label="accent" name="r_soft_accent" value="1" checked />
<x-radio appearance="soft" color="neutral" label="neutral" name="r_soft_neutral" value="1" checked />
<x-radio appearance="soft" color="info" label="info" name="r_soft_info" value="1" checked />
<x-radio appearance="soft" color="success" label="success" name="r_soft_success" value="1" checked />
<x-radio appearance="soft" color="warning" label="warning" name="r_soft_warning" value="1" checked />
<x-radio appearance="soft" color="error" label="error" name="r_soft_error" value="1" checked />

<label for="r_soft_primary_1_6a7e9b63e2e62" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_primary_1_6a7e9b63e2e62" class="peer sr-only" name="r_soft_primary" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-primary/10 border-transparent text-primary/80 peer-checked:bg-primary/15 peer-checked:border-primary/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary</span></span></label>
<label for="r_soft_secondary_1_6a7e9b63e2ea3" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_secondary_1_6a7e9b63e2ea3" class="peer sr-only" name="r_soft_secondary" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-secondary/10 border-transparent text-secondary/80 peer-checked:bg-secondary/15 peer-checked:border-secondary/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">secondary</span></span></label>
<label for="r_soft_accent_1_6a7e9b63e2edd" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_accent_1_6a7e9b63e2edd" class="peer sr-only" name="r_soft_accent" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-accent/10 border-transparent text-accent/80 peer-checked:bg-accent/15 peer-checked:border-accent/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent</span></span></label>
<label for="r_soft_neutral_1_6a7e9b63e2f16" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_neutral_1_6a7e9b63e2f16" class="peer sr-only" name="r_soft_neutral" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-content/10 border-transparent text-base-content/80 peer-checked:bg-base-content/15 peer-checked:border-base-content/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral</span></span></label>
<label for="r_soft_info_1_6a7e9b63e2f4d" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_info_1_6a7e9b63e2f4d" class="peer sr-only" name="r_soft_info" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-info/10 border-transparent text-info/80 peer-checked:bg-info/15 peer-checked:border-info/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">info</span></span></label>
<label for="r_soft_success_1_6a7e9b63e2f83" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_success_1_6a7e9b63e2f83" class="peer sr-only" name="r_soft_success" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-success/10 border-transparent text-success/80 peer-checked:bg-success/15 peer-checked:border-success/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">success</span></span></label>
<label for="r_soft_warning_1_6a7e9b63e2fb9" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_warning_1_6a7e9b63e2fb9" class="peer sr-only" name="r_soft_warning" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-warning/10 border-transparent text-warning/80 peer-checked:bg-warning/15 peer-checked:border-warning/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">warning</span></span></label>
<label for="r_soft_error_1_6a7e9b63e2fef" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_error_1_6a7e9b63e2fef" class="peer sr-only" name="r_soft_error" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-error/10 border-transparent text-error/80 peer-checked:bg-error/15 peer-checked:border-error/30"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">error</span></span></label>

<x-radio size="sm" label="size sm" name="r_sizes" value="sm" />
<x-radio size="md" label="size md (default)" name="r_sizes" value="md" checked />
<x-radio size="lg" label="size lg" name="r_sizes" value="lg" />

<label for="r_sizes_sm_6a7e9b640343f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_sm_6a7e9b640343f" class="peer sr-only" name="r_sizes" value="sm">
<span class="size-3.5 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-1.5 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-xs)] text-base-content select-none leading-snug">size sm</span></span></label>
<label for="r_sizes_md_6a7e9b6403482" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_md_6a7e9b6403482" class="peer sr-only" name="r_sizes" value="md" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">size md (default)</span></span></label>
<label for="r_sizes_lg_6a7e9b64034bb" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_lg_6a7e9b64034bb" class="peer sr-only" name="r_sizes" value="lg">
<span class="size-5 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2.5 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-md)] text-base-content select-none leading-snug">size lg</span></span></label>

<x-radio-group
    name="os"
    label="Select an OS"
    value="mac"
    :options="['mac' => 'Mac', 'windows' => 'Windows', 'linux' => 'Linux']"
/>
<x-radio-group
    name="plan"
    label="Plan"
    description="You can change this later"
    value="pro"
    color="success"
    appearance="base-100"
    :options="['free' => 'Free', 'pro' => 'Pro', 'enterprise' => 'Enterprise']"
/>

<fieldset class="block">
<legend id="os_group6a7e9b640b3b1" class="block text-[length:var(--text-field-sm)] font-medium text-base-content mb-1.5">Select an OS</legend>
<div class="flex flex-col gap-2" role="radiogroup" aria-labelledby="os_group6a7e9b640b3b1">
<label for="os_mac_6a7e9b640b40b" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_mac_6a7e9b640b40b" class="peer sr-only" name="os" value="mac" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Mac</span></span></label>
<label for="os_windows_6a7e9b640b455" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_windows_6a7e9b640b455" class="peer sr-only" name="os" value="windows">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Windows</span></span></label>
<label for="os_linux_6a7e9b640b497" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_linux_6a7e9b640b497" class="peer sr-only" name="os" value="linux">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Linux</span></span></label>
</div>
</fieldset>
<fieldset class="block">
<legend id="plan_group6a7e9b640b4f1" class="block text-[length:var(--text-field-sm)] font-medium text-base-content mb-1.5">Plan</legend>
<p class="text-[length:var(--text-field-xs)] text-base-content/60 mb-2 leading-snug">
        You can change this later
    </p>
<div class="flex flex-col gap-2" role="radiogroup" aria-labelledby="plan_group6a7e9b640b4f1">
<label for="plan_free_6a7e9b640b530" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_free_6a7e9b640b530" class="peer sr-only" name="plan" value="free">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/15 text-success/80 peer-checked:border-success/70"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Free</span></span></label>
<label for="plan_pro_6a7e9b640b56e" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_pro_6a7e9b640b56e" class="peer sr-only" name="plan" value="pro" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/15 text-success/80 peer-checked:border-success/70"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Pro</span></span></label>
<label for="plan_enterprise_6a7e9b640b5ab" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_enterprise_6a7e9b640b5ab" class="peer sr-only" name="plan" value="enterprise">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/15 text-success/80 peer-checked:border-success/70"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Enterprise</span></span></label>
</div>
</fieldset>

<x-radio-group name="notify" label="Notification settings" required>
    <x-radio name="notify" value="all" label="Receive all" description="Notifies you of new items, replies, and announcements" checked />
    <x-radio name="notify" value="mention" label="Mentions only" description="Only receive notifications addressed to you" />
    <x-radio name="notify" value="none" label="Receive none" description="Check notifications only when you visit the site" />
</x-radio-group>

<fieldset class="block">
<legend id="notify_group6a7e9b641d780" class="block text-[length:var(--text-field-sm)] font-medium text-base-content mb-1.5">Notification settings <span class="text-error ml-0.5">*</span></legend>
<div class="flex flex-col gap-2" role="radiogroup" aria-labelledby="notify_group6a7e9b641d780">
<label for="notify_all_6a7e9b641d6a0" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_all_6a7e9b641d6a0" class="peer sr-only" name="notify" value="all" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Receive all</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
            Notifies you of new items, replies, and announcements
        </p><label for="notify_mention_6a7e9b641d6e4" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_mention_6a7e9b641d6e4" class="peer sr-only" name="notify" value="mention">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Mentions only</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
            Only receive notifications addressed to you
        </p><label for="notify_none_6a7e9b641d721" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_none_6a7e9b641d721" class="peer sr-only" name="notify" value="none">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Receive none</span></span></label>
<p class="ml-6 mt-1 text-[length:var(--text-field-xs)] text-base-content/60 leading-snug">
            Check notifications only when you visit the site
        </p>
</div>
</fieldset>

<x-radio-group
    name="fruit"
    label="Favourite fruit"
    orientation="horizontal"
    value="apple"
    :options="['apple' => 'Apple', 'banana' => 'Banana', 'cherry' => 'Cherry']"
/>

<fieldset class="block">
<legend id="fruit_group6a7e9b6427e9b" class="block text-[length:var(--text-field-sm)] font-medium text-base-content mb-1.5">Favourite fruit</legend>
<div class="flex flex-wrap gap-x-6 gap-y-2" role="radiogroup" aria-labelledby="fruit_group6a7e9b6427e9b">
<label for="fruit_apple_6a7e9b6427ee1" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_apple_6a7e9b6427ee1" class="peer sr-only" name="fruit" value="apple" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Apple</span></span></label>
<label for="fruit_banana_6a7e9b6427f24" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_banana_6a7e9b6427f24" class="peer sr-only" name="fruit" value="banana">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Banana</span></span></label>
<label for="fruit_cherry_6a7e9b6427f61" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_cherry_6a7e9b6427f61" class="peer sr-only" name="fruit" value="cherry">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Cherry</span></span></label>
</div>
</fieldset>

<x-radio-group
    name="confirm"
    label="Agree"
    error="Please choose one of the options"
    :options="['yes' => 'Yes', 'no' => 'No']"
/>
<x-radio-group
    name="lock"
    label="Disabled group"
    value="b"
    disabled
    :options="['a' => 'A', 'b' => 'B (selected)', 'c' => 'C']"
/>

<fieldset class="block">
<legend id="confirm_group6a7e9b6431236" class="block text-[length:var(--text-field-sm)] font-medium text-error mb-1.5">Agree</legend>
<div class="flex flex-col gap-2" role="radiogroup" aria-labelledby="confirm_group6a7e9b6431236">
<label for="confirm_yes_6a7e9b643127d" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="confirm_yes_6a7e9b643127d" class="peer sr-only" name="confirm" value="yes">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-error-content peer-checked:bg-error peer-checked:border-error"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-error select-none leading-snug">Yes</span></span></label>
<label for="confirm_no_6a7e9b64312bf" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="confirm_no_6a7e9b64312bf" class="peer sr-only" name="confirm" value="no">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-error-content peer-checked:bg-error peer-checked:border-error"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-error select-none leading-snug">No</span></span></label>
</div>
<p class="mt-1.5 text-[length:var(--text-field-sm)] text-error">
        Please choose one of the options
    </p>
</fieldset>
<fieldset class="block">
<legend id="lock_group6a7e9b6431312" class="block text-[length:var(--text-field-sm)] font-medium text-base-content mb-1.5">Disabled group</legend>
<div class="flex flex-col gap-2" role="radiogroup" aria-labelledby="lock_group6a7e9b6431312">
<label for="lock_a_6a7e9b643134f" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_a_6a7e9b643134f" class="peer sr-only" name="lock" value="a" disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">A</span></span></label>
<label for="lock_b_6a7e9b643138f" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_b_6a7e9b643138f" class="peer sr-only" name="lock" value="b" checked disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">B (selected)</span></span></label>
<label for="lock_c_6a7e9b64313cb" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_c_6a7e9b64313cb" class="peer sr-only" name="lock" value="c" disabled>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-100 border-base-content/10 text-primary-content peer-checked:bg-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content/60 select-none leading-snug">C</span></span></label>
</div>
</fieldset>

<x-radio-group
    name="theme_surface"
    label="Theme"
    appearance="base-200"
    value="auto"
    :options="['light' => 'Light', 'dark' => 'Dark', 'auto' => 'Auto']"
/>

<fieldset class="block">
<legend id="theme_surface_group6a7e9b6440e33" class="block text-[length:var(--text-field-sm)] font-medium text-base-content mb-1.5">Theme</legend>
<div class="flex flex-col gap-2" role="radiogroup" aria-labelledby="theme_surface_group6a7e9b6440e33">
<label for="theme_surface_light_6a7e9b6440e83" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_light_6a7e9b6440e83" class="peer sr-only" name="theme_surface" value="light">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-200 border-base-content/15 text-primary/80 peer-checked:border-primary/70"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Light</span></span></label>
<label for="theme_surface_dark_6a7e9b6440eca" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_dark_6a7e9b6440eca" class="peer sr-only" name="theme_surface" value="dark">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-200 border-base-content/15 text-primary/80 peer-checked:border-primary/70"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Dark</span></span></label>
<label for="theme_surface_auto_6a7e9b6440f09" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_auto_6a7e9b6440f09" class="peer sr-only" name="theme_surface" value="auto" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-full transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 peer-focus-visible:ring-current peer-checked:[&amp;_.xy-dot]:scale-100 bg-base-200 border-base-content/15 text-primary/80 peer-checked:border-primary/70"><span class="xy-dot size-2 rounded-full bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">Auto</span></span></label>
</div>
</fieldset>