Input

Collects a single line of text.

Configurations

Supported configurations for this component.

DefaultWith iconPasswordWith hintWith label actionError

States

Interaction states covered by the API and the style contract.

HoverFocus visibleDisabledError focusFilled

Configurations

6 examples
Default
sm
md
lg
With icon
sm
md
lg
Password
sm
md
lg
With hint
Letters, numbers and dashes.
sm
Letters, numbers and dashes.
md
Letters, numbers and dashes.
lg
With label action
sm
md
lg
Error
Value out of range
sm
Value out of range
md
Value out of range
lg

States

5 examples
Hover
Rest
Hover
Focus visible
Rest
Focus visible
Disabled
Error focus
Rest
Value out of range
Error focus
Filled
Rest
Filled

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
labelstring-Label rendered above the field and linked to it.
size'sm'|'md'|'lg''md'Rung on the shared control ladder: 28, 32 or 40px tall. Matches Button and IconButton at the same value, so a field and a button in one row align without further styling.
iconReact.ComponentType<{ size?: number, strokeWidth?: number }>-Optional left icon. Its glyph scales with `size` (16, 18, 20px).
trailingIconReact.ComponentType<{ size?: number, strokeWidth?: number }>-Optional right icon. Its glyph follows the same scale as `icon`.
trailingIconLabelstring-Accessible name for the trailing control. Required when `onTrailingIconClick` is set.
onTrailingIconClick(event: React.MouseEvent<HTMLButtonElement>) => void-Turns `trailingIcon` into a focusable button rendered after the input in the tab order.
errorstring-When set, switches the field into the error state and renders the message.
classNamestring-Class name forwarded to the <input> element.
wrapperClassNamestring-Class name forwarded to the outer wrapper.
requiredbooleanfalseSets the native attribute and draws a brand mark after the label.
hintstring-A quiet line under the field explaining what it wants, before anything has gone wrong. An `error` replaces it: two messages under one field make a reader decide which one is live.
actionReact.ReactNode-A control on the label row, right aligned. It is for a shortcut that belongs to this field and nowhere else, such as "Forgot password". Keep it to one small link-weight button; the label has to stay the loudest thing on that line.

More Andromeda Pro components

Item

Lays out one row of a list or a menu: a glyph, a name with a line under it, and its actions.

5 variants6 states

Waveform

Displays a live signal as a moving trace, showing that a feed is running.

4 variants

Logo Cloud

Shows the names or logos of customers in a slow moving band under a short line of text.

2 variants1 states