Chip
MD3 chip — assist, filter, input and suggestion, in one component.
Try it
Knobs
tone variant size shape Pill instead of MD3's rounded rectangle.
<script> import { Chip } from 'omaris';</script><Chip>Design</Chip>Walkthrough
1. Kinds
One component covers all four MD3 chip kinds. What makes it a filter chip is selectable; what makes it an input chip is onremove.
<script lang="ts"> import { Chip } from 'omaris'; let selected = $state(true);</script><Chip>Assist</Chip><Chip selectable bind:selected>Filter</Chip><Chip onremove={() => {}} removeLabel="Remove Input">Input</Chip><Chip variant="elevated">Suggestion</Chip>2. Filter bar
overflow="scroll" keeps a filter bar to one line that swipes sideways, which is what MD3 does above a list. wrap is right in a form.
<script lang="ts"> import { Chip, ChipGroup } from 'omaris'; let picked = $state<string[]>(['Erbil']); function toggle(city: string) { picked = picked.includes(city) ? picked.filter((c) => c !== city) : [...picked, city]; }</script><div class="w-full max-w-md px-4"> <ChipGroup label="Cities" multiple overflow="scroll"> <Chip selectable selected={picked.includes('Baghdad')} onclick={() => toggle('Baghdad')}> Baghdad </Chip> <Chip selectable selected={picked.includes('Erbil')} onclick={() => toggle('Erbil')}>Erbil</Chip > <Chip selectable selected={picked.includes('Basra')} onclick={() => toggle('Basra')}>Basra</Chip > <Chip selectable selected={picked.includes('Mosul')} onclick={() => toggle('Mosul')}>Mosul</Chip > <Chip selectable selected={picked.includes('Duhok')} onclick={() => toggle('Duhok')}>Duhok</Chip > <Chip selectable selected={picked.includes('Najaf')} onclick={() => toggle('Najaf')}>Najaf</Chip > <Chip selectable selected={picked.includes('Karbala')} onclick={() => toggle('Karbala')}> Karbala </Chip> </ChipGroup></div>3. Icons and tones
check={false} keeps the icon when it is the meaning — a pin, a swatch; tone with tonal for a chip that reads as a state.
<script lang="ts"> import { Chip } from 'omaris';</script>{#snippet pin()} ...{/snippet}<Chip> {#snippet start()}{@render pin()}{/snippet} Pinned</Chip><Chip selectable selected check={false}> {#snippet start()}{@render pin()}{/snippet} Keeps its icon</Chip><Chip tone="success" variant="tonal">Paid</Chip><Chip tone="destructive" variant="tonal">Overdue</Chip><Chip size="sm">Small</Chip><Chip size="lg">Large</Chip>