Tags Input
Add and remove values in a tag-based input.
Preview
Import
import { TagsInput } from "@sigil-ui/components";Usage
<TagsInput placeholder="Add tag..." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | — | The current controlled value. |
defaultValue | string[] | — | Initial value when the component manages its own state. |
onChange | (tags: string[]) => void | — | Called when the value changes. |
placeholder | string | — | Hint shown before a value is entered. |
disabled | boolean | — | Prevents user interaction when enabled. |
max | number | — | Largest allowed value. |
inputLabel | string | — | Input Label configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-input-height | Input height |
--s-radius-input | Radius input |
--s-radius-md | Radius md |
--s-border | Border |
--s-border-style | Border style |
--s-background | Background |
--s-primary | Primary |
--s-duration-fast | Duration fast |
--s-radius-sm | Radius sm |
--s-surface | Surface |
--s-text | Text |
--s-text-muted | Text muted |