Select component
Loading demo: select-real-world
npx sdaia-ui@latest add select
import { Select } from '@/components/ui/select';<Select size="large" placholder="Select user" onChange={(v) => setV1(v as string)}/>Standard select input in the default placeholder state.
Loading demo: select-default
Select with a leading icon inside the input field.
Loading demo: select-icon
Select with a colour dot indicator as the leading item.
Loading demo: select-dot
Select input available in Large and Medium sizes.
Loading demo: select-sizes
Select in the disabled state, preventing user interaction.
Loading demo: select-disabled
Props for the Select component.
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 |