Home
Prajwal Hallale
Radio Button Group for Search Filters

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 CSS v3. It is responsive.

Radio Button Group

Author Prajwal Hallale

5.2k

5

Fork Fullscreen

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

<div class="flex flex-auto justify-evenly border rounded-md w-full">

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

<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

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

2 years ago

16.4k
Tailwind CSS Radio Button Cards

Author:
Prashant

2 years ago

11.3k
Button Group

Author:
TailwindFlex

2 years ago

8.3k
Simple buttons for links

Author:
Amit Pachange

2 years ago

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

Author:
Rafferty Kim

1 year ago

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

Author:
Timox5ty7thymix

2 years ago

16.4k
Yes / No radio input with reset button

Author:
Kris Showen

1 year ago

9.2k
Thumbs up and thumbs down buttons
Upvote downvote buttons

Author:
Prajwal Hallale

2 years ago

11.6k
Button group
nice and simple buttons with a hover effect

Author:
Sophia Baker

2 years ago

7.2k
beautiful buttons set
a beautofull buttons set like primary, outline and text.

Author:
Akram Khan

4 months ago

552
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

4 months ago

746

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1