Home
Kris Showen
Yes / No radio input with reset button

Yes / No radio input with reset button

This tailwind example is contributed by Kris Showen, on 03-Apr-2023. Component is made with Tailwind CSS v3.

10.2k

<div class="m-8 space-y-4">
    <div class="flex items-baseline">
        <div class="font-medium w-32">
            Disability
        </div>
        <div>
            <div class="flex  space-x-4 items-baseline group">
                <div
                    class="rounded-full flex bg-gray-50 border border-gray-300 py-2 px-4 space-x-4 group-checked:border-gray-500">
                    <div>
                        <input type="radio" name="rdo" id="yes" class="peer hidden">
                        <label for="yes"
                            class="cursor-pointer peer-checked:text-blue-700 peer-checked:cursor-default text-gray-400">Yes</label>
                    </div>
                    <div>
                        <input type="radio" name="rdo" id="no" class="peer hidden">
                        <label for="no"
                            class="cursor-pointer peer-checked:text-gray-800 peer-checked:cursor-default text-gray-400"">No</label>
                    </div>
                </div>
                <div>
                    <input type="radio" name="rdo" id="null" class="peer hidden" checked>
                    <label for="null" class="text-sm text-gray-200 peer-checked:inline hidden">Not set</label>
                    <label for="null" class="text-sm cursor-pointer text-blue-400 peer-checked:hidden inline">Reset
                    </label>
                </div>
            </div>
        </div>
    </div>

<div class="flex items-baseline">
        <div class="font-medium w-32">
            VA/Military
        </div>
        <div>
            <div class="flex  space-x-4  items-baseline">
                <div class="rounded-full flex bg-gray-50 border border-gray-300 py-2 px-4 space-x-4">
                    <div>
                        <input type="radio" name="rdo2" id="yes2" class="peer hidden">
                        <label for="yes2"
                            class="cursor-pointer peer-checked:text-blue-700 peer-checked:cursor-default text-gray-400">Yes</label>
                    </div>
                    <div>
                        <input type="radio" name="rdo2" id="no2" class="peer hidden">
                        <label for="no2"
                            class="cursor-pointer peer-checked:text-gray-800 peer-checked:cursor-default text-gray-400"">No</label>
                    </div>
                </div>
                <div>
                    <input type="radio" name="rdo2" id="null2" class="peer hidden" checked>
                    <label for="null2" class="text-sm text-gray-200 peer-checked:inline hidden">Not set</label>
                    <label for="null2" class="text-sm cursor-pointer text-blue-400 peer-checked:hidden inline">Reset
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples