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="you@example.com" />
<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.

Examples