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_548a763031a10" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_primary_1_548a763031a10" 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-transparent"><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_df52eaca833b6" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_secondary_1_df52eaca833b6" 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-transparent"><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_909da20bcea15" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_accent_1_909da20bcea15" 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-transparent"><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_8abf942051d49" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_neutral_1_8abf942051d49" 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-transparent"><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_2cf0bc52a1fe6" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_info_1_2cf0bc52a1fe6" 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-transparent"><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_1b09fff7dca89" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_success_1_1b09fff7dca89" 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-transparent"><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_bb68b67be2cd1" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_warning_1_bb68b67be2cd1" 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-transparent"><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_71293e176f483" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_solid_error_1_71293e176f483" 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-transparent"><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_9f22ff532cbec" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_primary_1_9f22ff532cbec" 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_ae04628cc58d8" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_secondary_1_ae04628cc58d8" 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_1acfe5f4f8ce8" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_accent_1_1acfe5f4f8ce8" 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_d9b63deae88f5" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_neutral_1_d9b63deae88f5" 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_598ba2e465bd5" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_info_1_598ba2e465bd5" 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_dfd55791979cf" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_success_1_dfd55791979cf" 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_886ff3d90914c" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_warning_1_886ff3d90914c" 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_dfda218945859" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_soft_error_1_dfda218945859" 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>

<div class="grid grid-cols-2 md:grid-cols-4 gap-sm">
    <x-radio appearance="wire" color="primary" label="primary" name="r_wire_primary" value="1" checked />
    <x-radio appearance="wire" color="neutral" label="neutral" name="r_wire_neutral" value="1" checked />
    <x-radio appearance="wire" color="accent" label="accent" name="r_wire_accent" value="1" checked />
    <x-radio appearance="wire" color="neutral" label="unchecked" name="r_wire_off" value="1" />
</div>
<div data-tune="proto" class="grid grid-cols-2 md:grid-cols-4 gap-sm">
    <x-radio appearance="wire" color="primary" label="primary (proto)" name="r_wire_proto_primary" value="1" checked />
    <x-radio appearance="wire" color="neutral" label="neutral (proto)" name="r_wire_proto_neutral" value="1" checked />
    <x-radio appearance="wire" color="accent" label="accent (proto)" name="r_wire_proto_accent" value="1" checked />
    <x-radio appearance="wire" color="neutral" label="unchecked (proto)" name="r_wire_proto_off" value="1" />
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-sm">
<label for="r_wire_primary_1_2e7af182e6814" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_primary_1_2e7af182e6814" class="peer sr-only" name="r_wire_primary" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-[var(--radius-selector)] 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_wire_neutral_1_aef9ebc40ce16" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_neutral_1_aef9ebc40ce16" class="peer sr-only" name="r_wire_neutral" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-base-content peer-checked:border-base-content"><span class="xy-dot size-2 rounded-[var(--radius-selector)] 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_wire_accent_1_00b4b275e2cc6" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_accent_1_00b4b275e2cc6" class="peer sr-only" name="r_wire_accent" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-accent peer-checked:border-accent"><span class="xy-dot size-2 rounded-[var(--radius-selector)] 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_wire_off_1_e2a43b7820bcb" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_off_1_e2a43b7820bcb" class="peer sr-only" name="r_wire_off" value="1">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-base-content peer-checked:border-base-content"><span class="xy-dot size-2 rounded-[var(--radius-selector)] bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">unchecked</span></span></label>
</div>
<div data-tune="proto" class="grid grid-cols-2 md:grid-cols-4 gap-sm">
<label for="r_wire_proto_primary_1_76a2a2c9f4739" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_proto_primary_1_76a2a2c9f4739" class="peer sr-only" name="r_wire_proto_primary" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-primary peer-checked:border-primary"><span class="xy-dot size-2 rounded-[var(--radius-selector)] bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">primary (proto)</span></span></label>
<label for="r_wire_proto_neutral_1_8bde5be77dfe7" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_proto_neutral_1_8bde5be77dfe7" class="peer sr-only" name="r_wire_proto_neutral" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-base-content peer-checked:border-base-content"><span class="xy-dot size-2 rounded-[var(--radius-selector)] bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">neutral (proto)</span></span></label>
<label for="r_wire_proto_accent_1_77d8bb19f4e44" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_proto_accent_1_77d8bb19f4e44" class="peer sr-only" name="r_wire_proto_accent" value="1" checked>
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-accent peer-checked:border-accent"><span class="xy-dot size-2 rounded-[var(--radius-selector)] bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">accent (proto)</span></span></label>
<label for="r_wire_proto_off_1_650e5f2b2e697" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_wire_proto_off_1_650e5f2b2e697" class="peer sr-only" name="r_wire_proto_off" value="1">
<span class="size-4 relative shrink-0 inline-flex items-center justify-center border-[length:var(--border)] rounded-[var(--radius-selector)] 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-transparent border-base-content/45 text-base-content peer-checked:border-base-content"><span class="xy-dot size-2 rounded-[var(--radius-selector)] bg-current scale-0 transition-transform"></span></span>
<span class="text-[length:var(--text-field-sm)] text-base-content select-none leading-snug">unchecked (proto)</span></span></label>
</div>

<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_ab4200dde846f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_sm_ab4200dde846f" 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-transparent"><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_107df3787a61f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_md_107df3787a61f" 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-transparent"><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_789021f0eaa5a" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="r_sizes_lg_789021f0eaa5a" 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-transparent"><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_group6ad18a7833480" 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_group6ad18a7833480">
<label for="os_mac_952ee565d84c9" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_mac_952ee565d84c9" 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-transparent"><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_7ae3e73440355" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_windows_7ae3e73440355" 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-transparent"><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_c084a800ec25f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="os_linux_c084a800ec25f" 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-transparent"><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_group6ad18a78335aa" 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_group6ad18a78335aa">
<label for="plan_free_856f211d512aa" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_free_856f211d512aa" 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_ba34062f5687f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_pro_ba34062f5687f" 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_cb223a2e4a8f8" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="plan_enterprise_cb223a2e4a8f8" 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_group6ad18a78457ae" 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_group6ad18a78457ae">
<label for="notify_all_c71da91851f4f" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_all_c71da91851f4f" 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-transparent"><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_4c9cc0874b29d" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_mention_4c9cc0874b29d" 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-transparent"><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_17006bff69270" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="notify_none_17006bff69270" 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-transparent"><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_group6ad18a78501bb" 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_group6ad18a78501bb">
<label for="fruit_apple_a3d31a9fc91cd" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_apple_a3d31a9fc91cd" 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-transparent"><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_960cb29ca6560" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_banana_960cb29ca6560" 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-transparent"><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_80d27b5247055" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="fruit_cherry_80d27b5247055" 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-transparent"><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_group6ad18a7859559" 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_group6ad18a7859559">
<label for="confirm_yes_9c3ddcbf6e761" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="confirm_yes_9c3ddcbf6e761" 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-transparent"><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_904d8f6d26407" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="confirm_no_904d8f6d26407" 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-transparent"><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_group6ad18a785964b" 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_group6ad18a785964b">
<label for="lock_a_0f65ad552d45b" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_a_0f65ad552d45b" 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-transparent"><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_b2d5bfcf89c78" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_b_b2d5bfcf89c78" 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-transparent"><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_2e8e94c5f0820" class="block cursor-not-allowed opacity-60"><span class="flex items-center gap-2"><input type="radio" id="lock_c_2e8e94c5f0820" 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-transparent"><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_group6ad18a7869151" 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_group6ad18a7869151">
<label for="theme_surface_light_2a4e724de2c9b" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_light_2a4e724de2c9b" 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_9ba8ac0fa5320" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_dark_9ba8ac0fa5320" 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_e812ff82803da" class="block cursor-pointer"><span class="flex items-center gap-2"><input type="radio" id="theme_surface_auto_e812ff82803da" 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>