Chip

Usage

A Chip is a tonal pill a small control tall. What it is depends on what you give it: plain, it is a label; with selected, a toggle; with onclick, a button; with href, a link.

Filters

Bind selected and the chip becomes a toggle button that flips it when pressed. A selected chip is filled and shows a check, so the state does not rely on colour alone.

<script>
  import { Chip } from 'sveltier';
  let card = $state(true);
  let transfer = $state(false);
</script>

<Chip bind:selected={card}>Card</Chip>
<Chip bind:selected={transfer}>Transfer</Chip>

Removable tags

closable adds a close button that calls onclose. Name it for what it removes with closeLabel. A chip that is itself a button or a link cannot also be closable, since one control would sit inside another; put the action in a Button next to it.

<script>
  import { Chip } from 'sveltier';
  let currencies = $state(['EUR', 'GBP', 'USD']);
</script>

{#each currencies as currency (currency)}
  <Chip
    closable
    closeLabel="Remove {currency}"
    onclose={() => (currencies = currencies.filter((c) => c !== currency))}
  >
    {currency}
  </Chip>
{/each}

Accessibility

• A filter chip is a <button> with aria-pressed, pressed with Enter or Space.
• The close button is its own button in the tab order, named by closeLabel.
• A plain chip is text, not a control: it is read but not focused.

API