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

10k
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.6k
Yes / No radio input with reset button

Kris Showen

3 years ago

11.1k
Button Dropdown
Drop down button with only tailwind css using focus

Shivam Vishwakarma

2 years ago

2.8k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

KULDEEP

1 year ago

1.2k
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

1.3k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Md. Tofayel islam

2 years ago

5k