Tags Input

نصب

pnpm dlx @simurgh-ui/cli add tags-input

import { TagsInput } from '@simurgh-ui/react/tags-input';
import { TagsInput as VueTagsInput } from '@simurgh-ui/vue/tags-input';
import { TagsInputComponent } from '@simurgh-ui/angular/tags-input';
import '@simurgh-ui/styles/tags-input.css';

پیش‌نمایش واقعی

Live component Tags Input ◆

TypeScript×Accessibility×

استفاده

React

<TagsInput aria-label="مهارت‌ها" inputLabel="افزودن مهارت" name="skills" defaultValue={['TypeScript']} onValueChange={setSkills} />

Vue

<TagsInput v-model="skills" aria-label="مهارت‌ها" input-label="افزودن مهارت" name="skills" />

Angular

<simurgh-tags-input aria-label="مهارت‌ها" inputLabel="افزودن مهارت" name="skills" [value]="skills" (valueChange)="skills = $event" />

Enter یا ویرگول مقدار جاری را اضافه می‌کند و Backspace روی ورودی خالی آخرین tag را حذف می‌کند. مقدار خالی و تکراری نادیده گرفته می‌شود. با تعیین name، برای هر tag یک ورودی پنهان ساخته می‌شود و FormData.getAll(name) فهرست کامل را برمی‌گرداند. label ورودی و دکمهٔ حذف را بومی‌سازی کنید.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.