Tags Input
Ввод тегов. Бесплатно, MIT · Формы и ввод › Текст
Установка
npx valyro-cli@latest add tags-input
npx shadcn@latest add https://valyro.xyz/r/tags-input.json
npm install valyro-ui
import 'valyro-ui/styles.css';
import { TagsInput } from 'valyro-ui';
Пропсы
| Prop | Type | Default | |
|---|---|---|---|
value | string[] | Controlled value; use with onValueChange. | |
defaultValue | string[] | [] | Initial value when uncontrolled. |
onValueChange | (tags: string[]) => void | Called with the new value when it changes. | |
max | number | Maximum number of tags. | |
validate | (tag: string, tags: string[]) => boolean | Return false to reject a tag; the text stays in the input and the field is marked invalid. | |
suggestions | string[] | Completions shown in a dropdown while typing (already added tags are hidden). | |
size | 'sm' | 'md' | 'lg' | 'md' | Field height and text size. |
invalid | boolean | Danger border and aria-invalid. Also shown after a rejected tag or while a required field is empty on submit. | |
name | string | Submits every tag with the surrounding form, one hidden input per tag. The typed text is not submitted. | |
required | boolean | Blocks native form submission while there are no tags. | |
labels | Partial<TagsInputLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Похожие компоненты
- Text Input — Текстовые поля
- Textarea — Многострочный ввод
- Search Input — Поисковая строка
- Mentions Input — Текст с @упоминаниями и #тегами, асинхронные подсказки
- Select — Выбор из списка
- Multi Select — Множественный выбор
- Combobox — Поиск и выбор
- Listbox — Список вариантов на странице: один или несколько, диапазоны с Shift
- Chip Group — Группа чипов с иконками: один или несколько вариантов
- Checkbox Tree — Дерево с чекбоксами: каскад, частичная отметка, клавиатура
- Checkbox — Флажки
- Checkbox Group — Флажки с общей подписью, подсказкой, ошибкой и обязательностью
Назад: Mentions Input · Далее: Select · Весь раздел «Формы и ввод»