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_6a7e9b4fa3060" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_primary_1_6a7e9b4fa3060" 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_6a7e9b4fa30ad" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_secondary_1_6a7e9b4fa30ad" 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_6a7e9b4fa30eb" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_accent_1_6a7e9b4fa30eb" 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_6a7e9b4fa3127" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_neutral_1_6a7e9b4fa3127" 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_6a7e9b4fa3163" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_info_1_6a7e9b4fa3163" 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_6a7e9b4fa319c" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_success_1_6a7e9b4fa319c" 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_6a7e9b4fa31cf" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_warning_1_6a7e9b4fa31cf" 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_6a7e9b4fa3201" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_error_1_6a7e9b4fa3201" 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_6a7e9b4fb81de" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_primary_1_6a7e9b4fb81de" 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_6a7e9b4fb822f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_secondary_1_6a7e9b4fb822f" 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_6a7e9b4fb8271" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_accent_1_6a7e9b4fb8271" 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_6a7e9b4fb82ad" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_neutral_1_6a7e9b4fb82ad" 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_6a7e9b4fb82e7" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_info_1_6a7e9b4fb82e7" 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_6a7e9b4fb831e" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_success_1_6a7e9b4fb831e" 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_6a7e9b4fb8355" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_warning_1_6a7e9b4fb8355" 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_6a7e9b4fb838b" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_error_1_6a7e9b4fb838b" 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_6a7e9b4fcd9ea" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_sm_6a7e9b4fcd9ea" 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_6a7e9b4fcda2b" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_md_6a7e9b4fcda2b" 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_6a7e9b4fcda62" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_lg_6a7e9b4fcda62" 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_group6a7e9b4fd6052" 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_group6a7e9b4fd6052">
<label for="os_mac_6a7e9b4fd60af" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_mac_6a7e9b4fd60af" 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_6a7e9b4fd60fb" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_windows_6a7e9b4fd60fb" 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_6a7e9b4fd6141" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_linux_6a7e9b4fd6141" 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_group6a7e9b4fd6194" 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_group6a7e9b4fd6194">
<label for="plan_free_6a7e9b4fd61cb" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_free_6a7e9b4fd61cb" 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_6a7e9b4fd6202" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_pro_6a7e9b4fd6202" 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_6a7e9b4fd6238" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_enterprise_6a7e9b4fd6238" 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_group6a7e9b4fe907b" 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_group6a7e9b4fe907b">
<label for="notify_all_6a7e9b4fe8fa2" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_all_6a7e9b4fe8fa2" 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_6a7e9b4fe8fe5" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_mention_6a7e9b4fe8fe5" 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_6a7e9b4fe9020" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_none_6a7e9b4fe9020" 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_group6a7e9b4ff3ae2" 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_group6a7e9b4ff3ae2">
<label for="fruit_apple_6a7e9b4ff3b2b" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_apple_6a7e9b4ff3b2b" 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_6a7e9b4ff3b69" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_banana_6a7e9b4ff3b69" 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_6a7e9b4ff3ba1" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_cherry_6a7e9b4ff3ba1" 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_group6a7e9b5008d13" 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_group6a7e9b5008d13">
<label for="confirm_yes_6a7e9b5008d64" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="confirm_yes_6a7e9b5008d64" 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_6a7e9b5008dae" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="confirm_no_6a7e9b5008dae" 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_group6a7e9b5008e09" 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_group6a7e9b5008e09">
<label for="lock_a_6a7e9b5008e47" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_a_6a7e9b5008e47" 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_6a7e9b5008e87" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_b_6a7e9b5008e87" 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_6a7e9b5008ec4" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_c_6a7e9b5008ec4" 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_group6a7e9b5018c0b" 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_group6a7e9b5018c0b">
<label for="theme_surface_light_6a7e9b5018c60" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_light_6a7e9b5018c60" 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_6a7e9b5018ca6" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_dark_6a7e9b5018ca6" 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_6a7e9b5018ce7" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_auto_6a7e9b5018ce7" 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>