Radio Button Group for Search Filters

set of radio buttons grouped for selecting different search filters

This tailwind example is contributed by Prajwal Hallale, on 12-Dec-2023. Component is made with Tailwind v3.4. It is responsive.

Radio Button Group

Author Prajwal Hallale

Tailwind v3.4 5.7k 5

Fork Fullscreen

<div class="w-full max-w-2xl mx-auto">
    <label class="text-muted" for="searchIn">
        Search in
    </label>

<button class="border-none px-2 py-1 rounded-md w-full">
            <input type="radio" class="hidden" id="searchTopics">
            <label class="cursor-pointer" for="searchTopics">Topics</label>
        </button>

<button class="bg-blue-600 text-white px-2 py-1 rounded-md w-full">
            <input type="radio" class="hidden" id="searchChapters">
            <label class="cursor-pointer" for="searchChapters">Chapters</label>
        </button>

<button class="border-none px-2 py-1 rounded-md w-full">
            <input type="radio" class="hidden" id="searchCourses">
            <label class="cursor-pointer" for="searchCourses">Courses</label>
        </button>

</div>
</div>

Related Examples

Tab navigation buttons

Simon Scheffer

3 years ago

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

Prajwal Hallale

4 years ago

17.1k
Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Button Group

TailwindFlex

4 years ago

9.9k
Simple buttons for links

Amit Pachange

3 years ago

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

Rafferty Kim

3 years ago

10.9k
Button group with icon
edit, view, and delete buttons group

Timox5ty7thymix

3 years ago

18.4k
Yes / No radio input with reset button

Kris Showen

3 years ago

11k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

734
Buttons with Icon

_Amar_

4 years ago

16.8k
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

ROHIT RAJPUT

1 year ago

2.7k
Buttons set
buttons sets of, primary, outlined, text and link

Akram Khan

2 years ago

2.1k