القائمة المنسدلة للاختيار

مكوّن القائمة المنسدلة للاختيار

Loading demo: select-real-world

التثبيت

npx sdaia-ui@latest add select

import { Select } from '@sdaia/ui';

<Select size="large" placholder="Select user" onChange={(v) => setV1(v as string)}/>

حقل الاختيار القياسي في حالة نص التلميح الافتراضي.

Loading demo: select-default

القائمة المنسدلة للاختيار مع أيقونة بادئة داخل حقل الإدخال.

Loading demo: select-icon

القائمة المنسدلة للاختيار مع مؤشر نقطة ملونة كعنصر بادئ.

Loading demo: select-dot

القائمة المنسدلة للاختيار متاحة بحجمَي كبير ومتوسط.

Loading demo: select-sizes

القائمة المنسدلة للاختيار في الحالة المعطَّلة، تمنع تفاعل المستخدم.

Loading demo: select-disabled

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

Prop	Type	Default	Required
leadingItem	"none" \| "icon" \| "dot" \| "checkbox" \| "avatar"	"none"	optional
leadingIcon	ReactNode	—	optional
avatarSrc	string	"/svgs/SaudiAvatar.svg"	optional
size	"large" \| "medium"	"large"	optional
options	SelectOption[]	[]	optional
value	string \| string[]	—	optional
onChange	(value: string \| string[]) => void	—	optional
multiple	boolean	false	optional
placeholder	string	"Select option"	optional
label	string	—	optional
required	boolean	false	optional
helperText	string	—	optional
error	string	—	optional
disabled	boolean	false	optional
leading	"none" \| "icon" \| "dot" \| "checkbox" \| "avatar"	"none"	optional