Filter

<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~Filter using HTML form, radio buttons and reset button

A HTML from for filtering items

<form class="filter"> <input class="btn btn-square" type="reset" value="×"/> <input class="btn" type="radio" name="frameworks" autocomplete="off" aria-label="Svelte"/> <input class="btn" type="radio" name="frameworks" autocomplete="off" aria-label="Vue"/> <input class="btn" type="radio" name="frameworks" autocomplete="off" aria-label="React"/> </form>

~Filter without HTML 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" autocomplete="off" aria-label="All"/> <input class="btn" type="radio" name="metaframeworks" autocomplete="off" aria-label="Sveltekit"/> <input class="btn" type="radio" name="metaframeworks" autocomplete="off" aria-label="Nuxt"/> <input class="btn" type="radio" name="metaframeworks" autocomplete="off" aria-label="Next.js"/> </div>

~Filter using HTML form, checkboxes, and a reset button

For having multiple choices, use checkboxes. It doesn't need the filter class name.

<form> <input class="btn" type="checkbox" name="frameworks" autocomplete="off" aria-label="Svelte"/> <input class="btn" type="checkbox" name="frameworks" autocomplete="off" aria-label="Vue"/> <input class="btn" type="checkbox" name="frameworks" autocomplete="off" aria-label="React"/> <input class="btn btn-square" type="reset" value="×"/> </form>