Filter
Filter is a group of radio buttons. Choosing one of the options will hide the others and shows a reset button next to the chosen option.
| Class name | Type | |
|---|---|---|
| filter | Component | For a HTML <form> or a <div> element that includes radio buttons for filtering items |
| filter-reset | Part | An alternative to the reset button if you can't use a HTML form |
A HTML from for filtering items
<form class="$$filter"> <input class="$$btn $$btn-square" type="reset" value="×"/> <input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/> <input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/> <input class="$$btn" type="radio" name="frameworks" aria-label="React"/> </form>
<form class="$$filter">
<input class="$$btn $$btn-square" type="reset" value="×"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="React"/>
</form>
<form class="$$filter">
<input class="$$btn $$btn-square" type="reset" value="×"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="React"/>
</form>
<form class="$$filter">
<input class="$$btn $$btn-square" type="reset" value="×"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Svelte"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="Vue"/>
<input class="$$btn" type="radio" name="frameworks" aria-label="React"/>
</form>Use this if you can’t use a HTML form for some reason
<div class="$$filter"> <input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/> <input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/> <input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/> <input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/> </div>
<div class="$$filter">
<input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>
<div class="$$filter">
<input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>
<div class="$$filter">
<input class="$$btn $$filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
<input class="$$btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
</div>Do you have a question? Ask on GitHub or Discord server
Do you see a bug? open an issue on GitHub
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
