ValyroUI English version

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';

Пропсы

PropTypeDefault
valuestring[]Controlled value; use with onValueChange.
defaultValuestring[][]Initial value when uncontrolled.
onValueChange(tags: string[]) => voidCalled with the new value when it changes.
maxnumberMaximum number of tags.
validate(tag: string, tags: string[]) => booleanReturn false to reject a tag; the text stays in the input and the field is marked invalid.
suggestionsstring[]Completions shown in a dropdown while typing (already added tags are hidden).
size'sm' | 'md' | 'lg''md'Field height and text size.
invalidbooleanDanger border and aria-invalid. Also shown after a rejected tag or while a required field is empty on submit.
namestringSubmits every tag with the surrounding form, one hidden input per tag. The typed text is not submitted.
requiredbooleanBlocks native form submission while there are no tags.
labelsPartial<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 · Весь раздел «Формы и ввод»