ChipInput

import { ChipInput } from 'svogg-components';

Component for manipulating a list of strings represented by chips/badges. Uses the WAI-ARIA grid pattern for structuring the list of chips. Value can either be bound directly via bind:chips, or retrieved natively from form data by passing a name attribute to the component.

Note that if used in conjunction with Svelte form actions, the value must be manually converted to a value compatible with FormData before posting (for example by modifying the value in a submit function when using progressive enhancement).

In addition to the declared props, the component accepts any props valid as attributes for a native input HTML element.

let chips: string[] = ['Bats', 'Scorpions'];

<ChipInput placeholder="Add a creepy animal..." bind:chips />

ChipInput

CSS

Keyboard navigation

1. Tab
   1. When focus moves into the component, places focus on the text input.
   2. If text input has focus, moves focus to the first column of the first chip.
   3. When a chip contains focus, moves focus to the next element in the document tab sequence.
2. Shift + Tab
   1. When focus moves into the component, places focus on the first column of the first chip.
   2. If a chip contains focus, places focus on the text input.
   3. If the text chip has focus, moves focus to the previous element in the document tab sequence.
3. ← or →
   1. If a chip contains focus, moves focus horizontally to the next or previous column respectively.
4. ↑ or ↓
   1. If a chip contains focus, moves focus horizontally to the next or previous column with the same column index.