Select
Select component
'use client'; import { useState } from 'react';import { Select, Button } from 'sdaia-ui'; Installation
npx sdaia-ui@latest add select
Usage
import { Select } from '@/components/ui/select';<Select size="large" placholder="Select user" onChange={(v) => setV1(v as string)}/>Examples
Default
Standard select input in the default placeholder state.
<Select label="User" required placeholder="Select user" options={OPTIONS}With Icon
Select with a leading icon inside the input field.
<Select label="User" required placeholder="Select user" leading="icon"With Dot
Select with a colour dot indicator as the leading item.
<Select label="Status" required placeholder="Select status" leading="dot"Sizes
Select input available in Large and Medium sizes.
<div className="flex flex-col gap-4 w-[350px]"> <Select size="large" label="Large" placeholder="Select user" options={OPTIONS} value={v1} onChange={(v) => setV1(v as string)} helperText="Size: Large" /> <Select size="medium" label="Medium" placeholder="Select user" options={OPTIONS} value={v2} onChange={(v) => setV2(v as string)} helperText="Size: Medium" /></div>Disabled
Select in the disabled state, preventing user interaction.
<Select label="User" required placeholder="Select user" options={OPTIONS}API Reference
SelectProps
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 |