Form fields·loomora/Select
⚙Related configs↗Select
Renders a native select with Loomora field styling, optional trigger decoration, and custom option records.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { Select } from 'loomora'
<Select label="Country" options={countries} properties={{
value, onChange: (event) => setValue(event.target.value),
}} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | SelectOption[] | [] | Native option records or optgroup records. |
| properties.value / onChange | select value and change event | '' / — | Controlled selection. |
| showTrigger | boolean | true | Shows the configured select trigger. |
| trigger | ReactNode | icon config | config default | Custom trigger content or icon settings. |
| label / error / inputHelper | field composition props | — | Shared field label, error and helper options. |