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

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

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

3 years ago

16.9k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.3k
Button Group

Author:
TailwindFlex

3 years ago

9k
Simple buttons for links

Author:
Amit Pachange

2 years ago

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

Author:
Rafferty Kim

2 years ago

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

Author:
Timox5ty7thymix

2 years ago

17.4k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

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

3 weeks ago

393
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.8k
Buttons in pair

Author:
Amit Pachange

2 years ago

10.6k
Sign in with buttons

Author:
Simon Scheffer

2 years ago

11.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components