Filter

Radio group with automatic filtering behavior

Basic

Form-based Filter

Using HTML form with radio inputs

Preview Code Auto

Form(
    Input(type='reset', value='×', cls='btn btn-square'),
    Input(type='radio', name='frameworks', aria_label='Svelte', cls='btn'),
    Input(type='radio', name='frameworks', aria_label='Vue', cls='btn'),
    Input(type='radio', name='frameworks', aria_label='React', cls='btn'),
    cls='filter'
)

Variants

Non-form Filter

Using div container with filter-reset

Preview Code Auto

Div(
    Input(type='radio', name='metaframeworks', aria_label='All', cls='btn filter-reset'),
    Input(type='radio', name='metaframeworks', aria_label='Sveltekit', cls='btn'),
    Input(type='radio', name='metaframeworks', aria_label='Nuxt', cls='btn'),
    Input(type='radio', name='metaframeworks', aria_label='Next.js', cls='btn'),
    cls='filter'
)

Class Reference

Class	Type	Description
filter	Component	Main container for filter group
filter-reset	Part	Reset button for non-form usage

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo