forms
Tailwind CSS Filter
A group of radio buttons that lets you pick one option, hiding the rest, with a reset button to change your choice.
A HTML form for filtering with radio buttons and a reset option.
<form class="filter">
<input class="btn btn-square" type="reset" value="×"/>
<input class="btn" type="radio" name="drink" aria-label="Tea"/>
<input class="btn" type="radio" name="drink" aria-label="Coffee"/>
<input class="btn" type="radio" name="drink" aria-label="Smoothie"/>
</form>Use this method when HTML forms are not an option.
<div class="filter">
<input class="btn filter-reset" type="radio" name="destination" aria-label="All"/>
<input class="btn" type="radio" name="destination" aria-label="Jungle"/>
<input class="btn" type="radio" name="destination" aria-label="Beach"/>
<input class="btn" type="radio" name="destination" aria-label="Mountain"/>
</div>