Form fields·loomora/TextField
TextField
The base text input used directly or through Input/Form. Pass native input attributes through properties.
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 { TextField } from 'loomora'
<TextField label="Display name" properties={{ value, onChange: (event) => setValue(event.target.value) }} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | ReactNode | LabelProps | '' | Field label. |
| properties.value | string | number | readonly string[] | '' | Controlled field value. |
| properties.onChange | ChangeEvent handler | — | Receives native input change events. |
| inputHelper | ReactNode | — | Supporting field description. |
| errors | { condition: boolean; helper: ReactNode }[] | — | Error state is true when any condition is true; shows the helper of the first true entry. |
| prefix / suffix | ReactNode | — | Content around the input inside its wrapper. |