Input

Password

12+ characters, 1 uppercase, 1 number, 1 special character.

.source-input-root Root wrapper with size and state attributes
.source-input-wrapper Border, focus ring, and icon container
.source-input-leading-icon Leading context icon slot
.source-input Native input element
.source-input-trailing-icon Trailing icon or password toggle
.source-input-hint Hint or validation message

States

StateAppearance

DefaultNeutral border with surface background.

FocusSingle outer ring and focus border (no double browser ring).

ErrorDanger border and danger hint text.

DisabledMuted opacity and blocked interaction.

Design intent

Input is the most versatile form field. Setting the correct type attribute is the single highest-impact decision: it activates the right keyboard on mobile, triggers native browser validation, and signals intent to password managers. The leading and trailing icon slots are for affordances that clarify the field's purpose, not decoration.

Field types

Supported types are text, email, password, number, search, url, and tel. Keep keyboard and validation behavior native to each type.

Password fields

Use a trailing visibility icon when possible and list requirements below the field before submit.

<Input
  id="password"
  type="password"
  label="Password"
  hint="12+ chars, at least 1 uppercase, 1 number, 1 symbol"
  passwordToggle
/>

Icon sizing

Keep icons at 16px for sm/md and 18px for lg. Do not scale icons below 14px in inputs.

Do and don't

Use input for concise values like email, URL, or project name.

Use placeholders as examples, never as a replacement for labels.

Show clear error states and let users fix issues without reloading the form.

Don't

Do not force multi-line content into a single-line field. Use Textarea.

Do not rely on icons without labels or hints to explain intent.

Avoid delaying basic validation feedback when invalid format is obvious.

Designer checklist

type attribute matches the expected content (email, tel, password, search).
Password fields show requirements before the first submission attempt.
Error text describes how to fix the problem, not just that there is one.
autocomplete is set for common fields (email, name, address).
Character limit is visible upfront, not only after it is exceeded.

Input props

PropTypeDefaultDescription

labelstringnullField label shown above input.

hintstringnullSupport or requirement text under input.

errorstringnullError text and error visual state.

leadingIcon / trailingIconReactNodenullOptional icon slots.

passwordTogglebooleantrue (password only)Adds built-in show/hide icon button for password fields.

requiredbooleanfalseShows * after label and sets the native required attribute.

sizesm | md | lgmdHeight and font size scale.

Basic usage

import { Input } from '@pierredelattre/source-react';

<Input id="email" type="email" label="Email" placeholder="you@company.com" />

All common types

<>
  <Input type="text" label="Name" />
  <Input type="search" label="Search docs" />
  <Input type="url" label="Website" />
  <Input type="tel" label="Phone" />
  <Input type="number" label="Seats" />
</>

Component tokens

TokenDefault

--source-input-bg--source-color-surface

--source-input-border-color--source-color-border-strong

--source-input-border-color-focus--source-color-accent

--source-input-icon-size1rem