Form composition·loomora/Input
Input
A discriminated input dispatcher for text, search, textarea, select, checks, Pin, phone, password, upload, and more.
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 { Input } from 'loomora'
<Input type="text" label="Name" properties={{
value, onChange: (event) => setValue(event.target.value),
}} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | InputType | 'text' | Chooses the concrete input component. |
| label | ReactNode | — | Label forwarded to the chosen field. |
| properties | type-specific props | — | Native or component-specific field properties. |
| condition | boolean | true | Omits the field when false. |
| loading | boolean | false | Loading state forwarded to supported fields. |