⌘K

text-input component

Drop-in semantic component. See examples, sizes, variants, and source.

Single-line text input. Compose a field wrapper around a label and an input; add input-wrapper when you need leading or trailing icons. Type modifiers (email, phone, password, card, date, amount) layer on opt-in formatting and validation from text-input.js.

Basic Input Fields

Basic Text Input

Input with Hint Text

Must be 3-20 characters, lowercase letters and numbers only

Required Field

We'll never share your email

Error State

Please enter a valid email address

Input Sizes

All Size Variants

Input Types

Email Input

Phone Input

Password Input — Secure Entry with Visibility Toggle

Password will be hidden as you type
Must match the password above

Search Input

Website Input

Credit Card Input

Amount Input

$

Date Input

Input States

Different States

Container Inheritance

Fields with Size Inheritance

All inputs inherit 'small' size from the container

Input Addons

Left Addon

$

Right Addon

kg

Both Addons

https:// .com

Input with Button

Email Subscribe

Search with Button

Textarea

Basic Textarea

Maximum 500 characters

Small Textarea

Inline Layout

Inline Field Examples

Focus Color States

Color Focus Rings

Class API Reference

Type Class Usage Notes
Base input Required base class for the input element Always required
field Container for label + input + hint Wraps the entire input structure
input-wrapper Container that hosts the input plus icons / clear buttons Use whenever you need leading or trailing adornments
Sizes xs 32px height — tiny Modifier on input
sm 36px height — small Modifier on input
(default) 40px height — medium No size class needed
xl 44px height — large Modifier on input
lg 48px height — big Modifier on input
Input Types email Email input — blur-validates against an email regex Or use type="email"
phone Phone input — formats as (555) 123-4567 as you type Or use type="tel"
password Password input — show/hide toggle mounted by JS Requires input-wrapper for the toggle
search Search input — visual cue for search context Provide a magnifier icon in the wrapper
website URL input — blur-validates with auto https:// prefix Or use type="url"
card Credit card — auto-groups in 4s and detects brand Brand icon mounted on the left
amount Currency — formats to two decimals on blur Pair with a $ symbol in the wrapper
date Date — masks input as MM/DD/YYYY Pair with a calendar icon
loading Skeleton loading state — animated background gradient Modifier on input
States error Error state — red border + reveals .error-message On input or parent field
disabled Disabled input HTML attribute, not a class
readonly Read-only input HTML attribute, not a class
Layout inline Inline field layout — label beside input Modifier on field
floating Floating label — animates up on focus Add peer to the input
fields Container for multiple fields — children inherit size and color Wrap with fields sm, fields xl, etc.
input-addon Container for input with prefix/suffix add-ons Use with addon left / addon right children
input-group Container that glues input + button into one rounded shape Useful for newsletter signup, search bars
Wrapper has-left-icon Reserve left padding for an icon child On input-wrapper
has-right-icon Reserve right padding for an icon child On input-wrapper (auto-added by password JS)
has-both-icons Reserve padding on both sides On input-wrapper
Focus Color primary Blue focus ring Modifier on input
positive Green focus ring Modifier on input
negative Red focus ring Modifier on input
warning Yellow focus ring Modifier on input