Select
A native select dropdown with label, helper text, and error states.
Installation
tsx
import { Select } from "madagent";Default
With Label
With Helper Text
Select your favorite fruit
With Error
Selection is required
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
options* | SelectOption[] | - | Array of options with value, label, and optional disabled |
label | string | - | Label displayed above the select |
placeholder | string | - | Placeholder option text |
helperText | string | - | Helper text displayed below the select |
errorText | string | - | Error message displayed below the select |
disabled | boolean | false | Disables the select |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<div style={{ maxWidth: 250 }}>
<Select label="اختر اللغة" options={[
{ value: "ar", label: "العربية" },
{ value: "en", label: "English" },
{ value: "fr", label: "Français" },
]} />
</div>