Yes / No radio input with reset button

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

Tailwind v3.4 11k 14

<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

Radio Buttons
Users can click anywhere on the input field to select the radio option

Prajwal Hallale

4 years ago

17.1k
Toggle button

Matthew Chen

3 years ago

13.4k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.1k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

2 years ago

10.9k
Range Slider

Alok

3 years ago

14.6k
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Prajwal Hallale

2 years ago

5.7k
Product Form - Reverie

S V

1 year ago

1.1k
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.1k
floting input

Md. Tofayel islam

2 years ago

3.7k
tailwind contact form
tailwind contact form

Geoffrey Callaghan

2 years ago

3k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k