Component

Input

Render text fields with prefix and suffix slots, validation state, and consistent control sizing.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Input } from "@chitrank2050/monoline-ui/input"

Basic usage

<Input placeholder="Search projects..." />
<Input size="sm" placeholder="Small input" />
<Input size="lg" placeholder="Large input" />
<Input variant="error" placeholder="Invalid value" />
<Input prefix="🔍" placeholder="Search docs..." />
<Input suffix="USD" placeholder="0.00" />

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Input covers a single native text field with optional prefix, suffix, sizing, and error styling.

Avoid when

The field needs multiple lines, composite selection, or built-in validation messages.

Accessibility

Input wraps the native input in a label but provides no built-in label text, so supply an accessible name and describe errors with aria-invalid and aria-describedby when applicable.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

variantdefault | errorVisual validation status

sizesm | md | lgComponent scale

prefixReactNodeSlot for prefix icons or labels

suffixReactNodeSlot for suffix icons or labels

wrapperClassNamestringOptional class applied to outer label element

Design tokens

Theme variables this component reads for color, spacing, and motion.

--duration-microCSS varInteraction active transition duration

--inputCSS varDefault field borders and backgrounds

Implementation

The source used by the example above, including any state it needs.

import { Input } from "@chitrank2050/monoline-ui/input"

export function Form() {
  return (
    <div className="flex flex-col gap-3 max-w-sm">
      <Input prefix="@" placeholder="Username" />
      <Input placeholder="Enter password" type="password" />
    </div>
  )
}

Compare related components or review the package and theme setup.

01ComponentSelectComponent · ReferenceReference→02ComponentButtonComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview