Input Radio

<div class="flex gap-x-3 text-sm items-start">
    <input type="radio" name="def_radio" id="def_check" class="ui-checkbox-radio-base ui-form-radio size-4 b b-border-light bg-bg  mt0.5 peer text-primary500 rd-full">
    <label for="def_check" class="text-fg peer-disabled-op80 peer-disabled-pointer-events-none">Default radio</label>
</div>
<div class="flex gap-x-3 text-sm items-start">
    <input type="radio" checked name="def_radio" id="def_radio_checked" class="ui-checkbox-radio-base ui-form-radio size-4 b b-border-light bg-bg  mt0.5 peer text-primary500 rd-full">
    <label for="def_radio_checked" class="text-gf peer-disabled-op80 peer-disabled-pointer-events-none">Default radio Checked</label>
</div>

<div class="flex flex-col gap-3">
    <div class="flex gap-x-3 text-sm items-start">
        <input type="radio" disabled name="def_radio_disabled" id="def_radio_disabled" class="ui-checkbox-radio-base ui-form-radio size-4 b b-border-light bg-bg  mt0.5 peer text-primary500 rd-full">
        <label for="def_radio_disabled" class="text-fg peer-disabled-op80 peer-disabled-pointer-events-none">Default radio</label>
    </div>
    <div class="flex gap-x-3 text-sm items-start">
        <input type="radio" disabled checked name="def_radio_checked_disabled" id="def_radio_checked_disabled" class="ui-checkbox-radio-base ui-form-radio size-4 b b-border-light bg-bg  mt0.5 peer text-primary500 rd-full">
        <label for="def_radio_checked_disabled" class="text-fg peer-disabled-op80 peer-disabled-pointer-events-none">Default radio Checked</label>
    </div>
</div>

<div class="flex gap-x-3 text-sm items-start">
    <input type="radio" name="def_radio_required" id="def_radio_required" class="ui-checkbox-radio-base ui-form-radio size-4 b b-border-light bg-bg  mt0.5 peer text-primary500 rd-full">
    <label for="def_radio_required" class="text-fg peer-disabled:op80 peer-disabled:pointer-events-none ">Default radio <span aria-hidden="true" class="text-danger-600 dark:text-danger-500">*</span></label>
</div>

<div class="flex gap-x-3 text-sm items-start">
    <input checked type="radio" name="radio_help_1" id="radio_help_1" class="form-input-radio size-4 peer">
    <label for="radio_help_1" class="text-fg-title font-medium text-base peer-disabled:op80 peer-disabled:pointer-events-none flex flex-col">
        Label
        <p class="text-fg text-sm font-light">
            Please check this box
        </p>
    </label>
</div>
<label for="radio_help_2" class="flex gap-x-3 text-sm items-start p-4 rd-md b b-border-strong/60 has-[:checked]:border-primary-600 dark-has-[:checked]:border-primary-500">
    <input type="radio" name="radio_help_1" id="radio_help_2" class="ui-checkbox-radio-base ui-form-radio size-4 b b-border-light bg-bg  mt0.5 peer text-primary500 rd-full">
    <div class="text-title font-medium text-base peer-disabled:op80 peer-disabled:pointer-events-none flex flex-col">
        Label
        <p class="text-fg text-sm font-light">
            Please check this box
        </p>
    </div>
</label>