Input

The Input component provides a styled text field for user data entry.

Preview

Serial Number

Import

import { Input } from 'meridian';

Props

Prop	Type	Default	Description
invalid	boolean	—	Whether the input value is invalid

Usage

Basic

<Input placeholder="Enter text" />

With Label

Always pair inputs with labels for accessibility:

<Label htmlFor="email">Email address</Label>
<Input id="email" type="email" placeholder="user@example.com" />

With Label

Email address

Invalid State

Use the invalid prop to indicate validation errors:

<Label htmlFor="invalid-input" required>Required field</Label>
<Input id="invalid-input" invalid placeholder="This field is required" />

Invalid State

Required field

Disabled State

<Input disabled placeholder="Cannot edit" />

Disabled

Input Types

The Input component accepts all standard HTML input types:

<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="email@example.com" />
<Input type="password" placeholder="Password" />
<Input type="number" placeholder="0" />
<Input type="search" placeholder="Search..." />