Input

Input

A flexible input component with built-in validation, masking, and accessible error states.

Usage

typescript
1import { Input } from '@flint-ui/core'
2

3<Input
4  label="Email address"
5  type="email"
6  placeholder="you@example.com"
7  required
8  onValidate={(value) => isEmail(value) ? null : 'Invalid email'}
9/>

Basic email input with inline validation

Variants

typescript
1// Text input
2<Input label="Name" placeholder="Enter your name" />
3

4// Password with visibility toggle
5<Input type="password" label="Password" showToggle />
6

7// Textarea mode
8<Input as="textarea" label="Bio" rows={4} maxLength={280} />
9

10// Number with increment/decrement
11<Input type="number" label="Quantity" min={0} max={99} step={1} />

Input supports text, password, textarea, and number variants

Props

PropTypeDefaultDescription
labelstring—Accessible label text
type'text' | 'email' | 'password' | 'number''text'HTML input type
placeholderstring—Placeholder text
requiredbooleanfalseMarks as required
disabledbooleanfalseDisables interaction
errorstring—Error message to display
onValidate(value) => string | null—Custom validation function
showTogglebooleanfalseShows visibility toggle for password
as'input' | 'textarea''input'Renders as textarea when set
maxLengthnumber—Maximum character count with indicator

Validation States

typescript
1// Real-time validation
2<Input
3  label="Username"
4  onValidate={(value) => {
5    if (value.length < 3) return 'Too short'
6    if (!/^[a-z0-9_]+$/.test(value)) return 'Only lowercase, numbers, underscores'
7    return null
8  }}
9  validateOn="change"
10/>
11

12// Server-side validation
13<Input
14  label="Email"
15  error={serverErrors.email}
16  onBlur={() => validateOnServer()}
17/>

Validation runs on change or blur — configure per input

<callout>Tip: Use validateOn="blur" for expensive validations like API calls. Use "change" for instant feedback on format rules.

Accessibility

Input automatically associates labels via htmlFor/id. Error messages are announced via aria-describedby. Required fields show both visual and aria-required indicators.

<callout>All error messages are live regions. Screen readers announce validation errors as they appear.

Advanced Usage