Tags Input
Free-form tags, typed into one field.
Walkthrough
1. Basic
Type and press Enter, a comma or Tab. Backspace in the empty box selects the last tag, and a second press takes it off.
Helps people find the dish in search.
<script lang="ts"> import { TagsInput } from 'omaris'; let keywords = $state(['kebab', 'grill']);</script><TagsInput class="w-96 max-w-full" label="Keywords" placeholder="Add a keyword" supportingText="Helps people find the dish in search." bind:value={keywords}/>2. Validation
validate returns the reason a tag was refused, and the typed text stays put for fixing. A paste with commas or newlines is split and vetted piece by piece; max adds a count and stops at the cap.
1/5
<script lang="ts"> import { TagsInput } from 'omaris'; let invites = $state(['dara@rasil.app']); const email = (tag: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(tag) || 'That is not an email address.';</script><TagsInput class="w-96 max-w-full" label="Invite teammates" placeholder="name@company.com" max={5} validate={email} bind:value={invites}/>3. In a field
Inside a Field it takes the label, the help and the error from the field, like any other control. The variants and sizes are Input's.
Shown as badges on the menu item.
Add at least one.
<script lang="ts"> import { Field, TagsInput } from 'omaris'; let diets = $state<string[]>([]);</script><Field class="w-96 max-w-full" label="Dietary tags" description="Shown as badges on the menu item." error={diets.length === 0 ? 'Add at least one.' : undefined} required> <TagsInput variant="filled" placeholder="vegan, halal…" bind:value={diets} /></Field>4. Overridden
A narrow box and long tags: a tag truncates inside its chip rather than pushing the field wider. classes reaches the frame, each chip and the box.
<script lang="ts"> import { TagsInput } from 'omaris';</script><TagsInput class="w-60 max-w-full" label="Paths" value={['/var/lib/omaris/cache/thumbnails', '/tmp']} classes={{ field: 'rounded-shape-xl', chip: 'font-mono', input: 'font-mono' }}/>