# daisyUI Documentation - Filter Component

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.

## Classes and Usage

### Core Classes:
- **filter** - For a HTML <form> or a <div> element that includes radio buttons for filtering items
- **filter-reset** - An alternative to the reset button if you can't use a HTML form

## Examples

### Filter using HTML form, radio buttons and reset button

A HTML from for filtering items

```html
<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>
```

### Filter without HTML form

Use this if you can't use a HTML form for some reason

```html
<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>
```

## Features

- Group of radio buttons for filtering
- Automatically hides other options when one is selected
- Shows a reset button next to the chosen option
- Works with HTML forms or div containers
- Uses btn components for styling

This component is useful for creating filter interfaces where only one option can be active at a time, with an easy way to reset the selection.