Select fields provide a native, accessible way to choose from a constrained set of values. Aggarly Platform uses selects heavily for status, role, locale, program/service selection, and administrative configurations. These primitives are token-driven, theme-safe, RTL-safe, and optimized for long sessions.
Baseline select, disabled, helper text, and validation. Use placeholders for single selects when a choice is required.
import { Select } from "@/design-system/components/Select";
export function Example() {
return (
<div className="stack-sm">
<Select
label="Student status"
placeholder="Select status"
defaultValue=""
>
<option value="active">Active</option>
<option value="paused">Paused</option>
<option value="discharged">Discharged</option>
</Select>
<Select
label="Assigned workspace admin"
defaultValue="sara"
helper="Used for routing and supervisor reporting."
>
<option value="sara">Sara Ahmed</option>
<option value="mike">Mike Johnson</option>
<option value="noor">Noor Ali</option>
</Select>
<Select
label="Program"
placeholder="Select program"
defaultValue=""
disabled
>
<option value="aba">ABA</option>
<option value="speech">Speech</option>
<option value="ot">Occupational Therapy</option>
</Select>
<Select
label="Goal priority"
defaultValue=""
placeholder="Select priority"
error="Please select a priority."
>
<option value="low">Low</option>
<option value="med">Medium</option>
<option value="high">High</option>
</Select>
</div>
);
}
Visual sizes are token-driven. Use sm for dense toolbars/tables, md for forms, and lg for primary workflows.
import { Select } from "@/design-system/components/Select";
export function Example() {
return (
<div className="stack-sm">
<Select size="sm" label="Small" defaultValue="active">
<option value="active">Active</option>
<option value="paused">Paused</option>
</Select>
<Select size="md" label="Default" defaultValue="active">
<option value="active">Active</option>
<option value="paused">Paused</option>
</Select>
<Select size="lg" label="Large" defaultValue="active">
<option value="active">Active</option>
<option value="paused">Paused</option>
</Select>
</div>
);
}
Menu size maps to the native HTML `size` attribute. Values > 1 render a listbox (always visible), which is often used for long sets and review workflows.
import { Select } from "@/design-system/components/Select";
export function Example() {
return (
<Select
label="Available goals (listbox)"
menuSize={6}
defaultValue="communication"
helper="Menu size > 1 renders a listbox (native, accessible)."
>
<option value="communication">Communication</option>
<option value="attention">Attention</option>
<option value="motor">Motor skills</option>
<option value="social">Social skills</option>
<option value="routine">Routine</option>
<option value="self-care">Self-care</option>
<option value="academics">Academics</option>
</Select>
);
}
Use optgroups for categorized choices and disable options/groups that are not available in the current context.
import { Select } from "@/design-system/components/Select";
export function Example() {
return (
<div className="stack-sm">
<Select
label="Service"
placeholder="Choose service"
defaultValue=""
>
<optgroup label="Core services">
<option value="aba">ABA</option>
<option value="speech">Speech</option>
<option value="ot">Occupational Therapy</option>
</optgroup>
<optgroup label="Specialized" disabled>
<option value="feeding">Feeding</option>
<option value="pt">Physical Therapy</option>
</optgroup>
<option value="other" disabled>
Other (disabled)
</option>
</Select>
<Select label="Long labels" defaultValue="long">
<option value="short">Short label</option>
<option value="long">
This is a longer option label to validate truncation and readability in dense UIs
</option>
</Select>
</div>
);
}
Multi-select uses native behavior and is ideal for configuration surfaces. Use helper text to clarify selection keys for desktop users.
import { Select } from "@/design-system/components/Select";
export function Example() {
return (
<Select
label="Notification channels"
multiple
menuSize={6}
defaultValue={["email", "sms"]}
helper="Hold Ctrl/⌘ to select multiple (native behavior)."
>
<option value="email">Email</option>
<option value="sms">SMS</option>
<option value="push">Push</option>
<option value="whatsapp">WhatsApp</option>
<option value="in-app">In-app</option>
<option value="none">None</option>
</Select>
);
}
Common select patterns used across Aggarly Platform (roles, locale, severity, session type, status, timezone). Keep choice sets small, semantic, and stable.
import { Select } from "@/design-system/components/Select";
export function Example() {
return (
<div className="selects-grid">
<Select label="Role" defaultValue="workspace admin">
<option value="workspace admin">Workspace admin</option>
<option value="supervisor">Supervisor</option>
<option value="educator">Educator</option>
<option value="workspace member">Workspace member</option>
</Select>
<Select label="Locale" defaultValue="en">
<option value="en">English</option>
<option value="ar">Arabic</option>
</Select>
<Select label="Severity" placeholder="Select level" defaultValue="">
<option value="low">Low</option>
<option value="med">Medium</option>
<option value="high">High</option>
</Select>
<Select label="Session type" defaultValue="in-person">
<option value="in-person">In-person</option>
<option value="remote">Remote</option>
<option value="hybrid">Hybrid</option>
</Select>
<Select label="Status" defaultValue="active">
<option value="active">Active</option>
<option value="paused">Paused</option>
<option value="archived">Archived</option>
</Select>
<Select label="Timezone" defaultValue="utc">
<option value="utc">UTC</option>
<option value="local">Local</option>
</Select>
</div>
);
}