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

<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

16.9k
Toggle button

Author:
Matthew Chen

2 years ago

12.5k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

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

Author:
Rafferty Kim

2 years ago

9.9k
Range Slider

Author:
Alok

3 years ago

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

Author:
Prajwal Hallale

1 year ago

5.5k
Product Form - Reverie

Author:
S V

5 months ago

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

Author:
Nick Girga

5 months ago

415
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

4k
File Upload

Author:
Rajesh Maheshwari

8 months ago

927

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components