input

Text input and textarea with optional leading/trailing adornment slots.

Thin, accessible wrappers around <input> and <textarea> that auto-wire with @fluixi-ui/field when nested inside a Field (picks up id, aria-describedby, aria-invalid, required, disabled from context).

Installation

pnpm add @fluixi-ui/input

Usage

import { Input, Textarea } from '@fluixi-ui/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.

Variants & floating label

Set variant to switch the field appearance — default keeps the skin's baseline, outlined is a bordered box, filled is a tinted fill with a bottom rule (the Material outlined / filled fields). The same variant is available on the SelectTrigger, ComboboxControl, and DropdownMenuTrigger.

Pass floatingLabel + label for a label that lifts into the top of the field on focus / when filled. It works with every variant and skin.

<Input variant="outlined" placeholder="you@example.com" />
<Input variant="filled" placeholder="Search" />

<Input floatingLabel label="Full name" />
<Input floatingLabel variant="filled" label="Phone" />

`Textarea`

All <textarea> attributes forwarded. Auto-wires with Field.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.

Examples