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.6k

<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

Author:
Prajwal Hallale

3 years ago

17k
Toggle button

Author:
Matthew Chen

2 years ago

12.9k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

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

Author:
Rafferty Kim

2 years ago

10.3k
Range Slider

Author:
Alok

3 years ago

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

Author:
Prajwal Hallale

2 years ago

5.6k
Product Form - Reverie

Author:
S V

10 months ago

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

Author:
Nick Girga

9 months ago

732
Material 3 Checkboxes [Light]
Checkboxes that conform to Google's Material 3 design guidelines

Author:
Nick Girga

9 months ago

495
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

2 months ago

221
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

2 years ago

6.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components