Forms

Tag input

Collects several short values, like keywords, each as a tag you can remove.

Installation

npx sinaui add tag-input

Copy src/lib/ui/TagInput.svelte, announce.ts, Icon.svelte and tokens.css. No other dependencies.

Examples

Basic

Enter or a comma adds a tag. Adding one that's already there makes it pulse instead.

Subjects

Algebra
Optics

Press Enter or a comma after each. Paste a list to add them all.

<script lang="ts">
	import TagInput from '#lib/ui/TagInput.svelte';

	let subjects = $state(['Algebra', 'Optics']);
</script>

<TagInput
	label="Subjects"
	bind:value={subjects}
	name="subjects"
	hint="Press Enter or a comma after each. Paste a list to add them all."
/>

With a limit and an error

Once the limit is reached, the text box steps aside until a tag is removed.

Cite up to three scholars

Cite at least one scholar.

<script lang="ts">
	import TagInput from '#lib/ui/TagInput.svelte';

	let scholars = $state<string[]>([]);
</script>

<TagInput
	label="Cite up to three scholars"
	bind:value={scholars}
	max={3}
	placeholder="Al-Khwārizmī, Ibn Sīnā…"
	error={scholars.length ? undefined : 'Cite at least one scholar.'}
/>

Props

Prop	Type	Default
`label`	`string` (required)
`value`	`string[]`, bindable	`[]`
`max`	`number`
`name`	`string`: each tag is submitted under it
`placeholder`, `hint`, `error`	`string`
`disabled`	`boolean`	`false`

Accessibility

The tags are a list, read with how many there are; each has a remove button named after it.
Adding, removing and duplicates are announced.
Backspace in the empty text box moves to the last tag first, so a tag isn't deleted by accident.

Key	Action
`Enter` `,`	Add what was typed.
`Backspace` (empty box)	Move to the last tag.
`←` `→`	Move between tags (mirrored right to left); past the last, back to the text box.
`Backspace` `Delete` (on a tag)	Remove it.