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.

9.1k

<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

2 years ago

16.4k
Toggle button

Author:
Matthew Chen

1 year ago

11.4k
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

11.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

2 years ago

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

Author:
Rafferty Kim

1 year ago

8.8k
Range Slider

Author:
Alok

2 years ago

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

Author:
Prajwal Hallale

1 year ago

5.1k
Checkbox button
press the button to check

Author:
Anonymous

1 year ago

3.2k
File Upload
Image or file upload card

Author:
Khalid

1 year ago

2.5k
Super input radio card
card input radio simple input card input design awesome card design rounded black shadow blue border gray icon card radio option HTML CSS select JavaScript dropdown

Author:
ROHIT RAJPUT

3 months ago

650
Payment Form

Author:
ABDO-SY

2 weeks ago

124
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components