Components · Forms

Input

Single-line text field with a label above and an optional hint or error below.

jsx

import { Input } from '@andeus/ui';

Field

Name

AllocationOf the portfolio

TickerNo such ticker

jsx

const [name, setName] = useState('');

<Input label="Name" placeholder="Trend follower" value={name} onChange={(e) => setName(e.target.value)} />
<Input label="Search" icon="search" placeholder="Ticker" />
<Input label="Allocation" numeric suffix="%" hint="Of the portfolio" />
<Input label="Ticker" error="No such ticker" />

Props

Prop	Type	Default
value	`string \| number`	—	Controlled with onChange; or pass defaultValue / defaultChecked.
label	`string \| ReactNode`	—
hint	`string \| ReactNode`	—
error	`string \| ReactNode`	—	Replaces the hint and marks the field invalid.
icon	`IconName`	—	Leading icon.
suffix	`string \| ReactNode`	—	Unit after the value.
size	`'s' \| 'm' \| 'l'`	'm'
numeric	`boolean`	false	Right-aligned tabular numerals.
placeholder	`string`	—
disabled	`boolean`	false

PreviousIconButton NextSelect