input
Text input and textarea with optional leading/trailing adornment slots.
Thin, accessible wrappers around <input> and <textarea> that auto-wire
with @fluixi/field when nested inside a Field (picks up id,
aria-describedby, aria-invalid, required, disabled from context).
Installation
pnpm add @fluixi/input
Usage
import { Input, Textarea } from '@fluixi/input';
<Input type="email" placeholder="[email protected]" />
<Input type="search" leading={<SearchIcon />} />
<Input type="password" trailing={<ToggleVisibilityButton />} />
<Textarea rows={4} placeholder="Your message…" />
Props
Input
| Prop | Type | Description |
|---|---|---|
leading |
JSX.Element |
Element rendered before the input (icon, prefix text). |
trailing |
JSX.Element |
Element rendered after the input (icon, button). |
All <input> attrs |
— | Forwarded to the native input. |
When leading or trailing is provided, Input renders a group wrapper
(data-input-group) that contains both adornment and input together.
Textarea
All <textarea> attributes forwarded. Auto-wires with Field.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.