Select
Select — the Input's frame around a styled list of values.
Walkthrough
1. Basic
Give it options and a label; the value is the option's value. For a short, fixed list nobody would search.
<script lang="ts"> import { Select } from 'omaris'; let city = $state('erbil'); const CITIES = [ { value: 'baghdad', label: 'Baghdad' }, { value: 'erbil', label: 'Erbil' }, { value: 'basra', label: 'Basra' }, { value: 'mosul', label: 'Mosul' } ];</script><Select class="w-64 max-w-full" label="City" options={CITIES} bind:value={city} />2. Descriptions and groups
A description gives each row a second line and group puts rows under a heading — for a plan or a currency, where the name alone does not say enough.
<script lang="ts"> import { Select } from 'omaris'; let plan = $state('team'); const PLANS = [ { value: 'free', label: 'Free', description: 'One project', group: 'Personal' }, { value: 'pro', label: 'Pro', description: 'Unlimited projects', group: 'Personal' }, { value: 'team', label: 'Team', description: 'Up to 10 seats', group: 'Business' }, { value: 'enterprise', label: 'Enterprise', description: 'SSO and audit logs', group: 'Business' } ];</script><Select class="w-72 max-w-full" label="Plan" options={PLANS} bind:value={plan} />3. States
The same states a text field has, wired the same way, so a form that mixes selects and text fields validates as one thing.
Choose a size.
<script lang="ts"> import { Select } from 'omaris'; const SIZES = [ { value: 's', label: 'Small' }, { value: 'm', label: 'Medium' }, { value: 'l', label: 'Large', disabled: true } ];</script><Select class="w-52 max-w-full" label="Required" required placeholder="Pick one" options={SIZES} /><Select class="w-52 max-w-full" label="Invalid" invalid placeholder="Pick one" supportingText="Choose a size." options={SIZES}/><Select class="w-52 max-w-full" label="Disabled" disabled value="m" options={SIZES} /><Select class="w-52 max-w-full" label="Clearable" clearable value="s" options={SIZES} />4. Native
native renders a real <select>. It gives up the styled list and the descriptions, and gains the platform's own picker — which is what you want on a phone, and in a long form that has to feel native.
<script lang="ts"> import { Select } from 'omaris'; const YEARS = [ { value: '2020', label: '2020' }, { value: '2021', label: '2021' }, { value: '2022', label: '2022' }, { value: '2023', label: '2023' }, { value: '2024', label: '2024' }, { value: '2025', label: '2025' } ];</script><Select class="w-40 max-w-full" label="Styled" options={YEARS} value="2024" /><Select class="w-40 max-w-full" label="Native" native options={YEARS} value="2024" />5. Overridden
A Select is a field with the shared popup list under it, so its parts are both sets — field is the closed control, option is a row of the list.
<script lang="ts"> import { Select } from 'omaris'; const CURRENCIES = [ { value: 'iqd', label: 'IQD' }, { value: 'usd', label: 'USD' }, { value: 'try', label: 'TRY' } ];</script><Select class="w-56 max-w-full" label="Currency" options={CURRENCIES} value="iqd" classes={{ value: 'font-mono tracking-wide', option: 'font-mono' }}/>