{% comment %}
Radix draws the dot with a nested indicator element. A native radio cannot hold
children, so the dot is the background painted onto the content box only, which
the padding shrinks to the middle.
{% endcomment %}
<input
    type="radio"
    class="
    aspect-square size-4 shrink-0 appearance-none rounded-full border
    border-input bg-clip-content p-[3px] shadow-xs
    transition-[color,box-shadow] outline-none
    checked:border-primary checked:bg-primary
    focus-visible:border-ring focus-visible:ring-[3px]
    focus-visible:ring-ring/50
    disabled:cursor-not-allowed disabled:opacity-50
    aria-invalid:border-destructive aria-invalid:ring-destructive/20
    dark:aria-invalid:ring-destructive/40
    {% if class %}
        {{ class }}
    {% endif %}
    "
    data-slot="radio-group-item"
    {{ attrs }}
>