إدخال النص

حقل إدخال نصي يتيح للمستخدمين إدخال النص أحادي السطر وتحريره.

Loading demo: text-input-real-world

التثبيت

npx sdaia-ui@latest add text-input

import { TextInput } from "@/components/ui/input"

<TextInput placeholder="Enter value..." />

حقل الإدخال النصي القياسي للاستخدام العام في النماذج.

Loading demo: text-input-default

استخدم `type="بحث Box"` لحقول البحث مع أيقونة بادئة وزر مسح.

Loading demo: text-input-search

استخدم `type="Trailing الزر"` لدمج حقل الإدخال مع زر إجراء مدمج.

Loading demo: text-input-trailing-button

استخدم `size="كبير"` للمواضع البارزة.

Loading demo: text-input-large

استخدم `size="متوسط"` لكثافة النماذج القياسية. هذا هو الافتراضي.

Loading demo: text-input-medium

استخدم `state="معطَّل"` لمنع التفاعل مع الحقل.

Loading demo: text-input-disabled

خصائص مكوّن TextInput.

Prop	Type	Default	Required
dir	'ltr' \| 'rtl'	—	optional
label	string	—	optional
helperText	string	—	optional
error	string	—	optional
size	"medium" \| "large"	"large"	optional
variant	'default' \| 'search-box' \| 'leading-dropdown' \| 'trailing-dropdown' \| 'leading-text' \| 'trailing-button' \| 'input-button'	'default'	optional
prefix	ReactNode	—	optional
suffix	ReactNode	—	optional
prefixBordered	boolean	—	optional
suffixBordered	boolean	—	optional
clearable	boolean	—	optional
onClear	() => void	—	optional
tags	TagItem[]	—	optional
onTagRemove	(id: string) => void	—	optional
fullWidth	boolean	—	optional
leadingDropdownLabel	string	—	optional
onLeadingDropdownClick	() => void	—	optional
trailingDropdownLabel	string	—	optional
onTrailingDropdownClick	() => void	—	optional
leadingText	string	—	optional
trailingButtonLabel	string	—	optional
trailingButtonIcon	ReactNode	—	optional
onTrailingButtonClick	() => void	—	optional
actionButtonLabel	string	—	optional
onActionButtonClick	() => void	—	optional