← Back to Components

Form Inputs

Input field components with multiple types, sizes, and states. Supports text, email, password, number, and other HTML input types with consistent styling and accessibility features.

Input Types

All HTML input types are supported with consistent styling across text, email, password, number, and other input types.

Text Input

Standard text input field

Email Input

Email validation included

Password Input

Hidden text for security

Number Input

Numeric input with controls

Phone Input

Phone number format

URL Input

Website address

Input Sizes

Three sizes available: Small (28px), Medium (36px), and Large (48px) heights.

Large Input (48px)

Use for prominent form fields and primary actions

Medium Input (36px)

Standard size for most form fields

Small Input (28px)

Compact size for dense forms or secondary fields

Input States

Interactive states provide visual feedback for user interactions and form validation.

Default State

Normal input appearance

Focused State

Blue border when active

Error State

This field has an error

Disabled State

Cannot be edited

Helper Text & Validation

Helper text provides guidance, while error messages offer validation feedback.

Input Variants Showcase

Complete showcase of all input size and state combinations available.

Large Inputs (48px)

Large Default

Large Error

Error message

Large Disabled

Medium Inputs (36px)

Medium Default

Medium Error

Error message

Medium Disabled

Small Inputs (28px)

Small Default

Small Error

Error message

Small Disabled