Input

Text fields and multi-line Textarea: sizes, color schemes, masks (Input), validation, and native HTML attributes. Reference — header Documentation → Input.

Examples: basics

Field demo

colorScheme and size come from library presets; pair with Typography for labels.

Examples: variant & InputGroup

Variants

default keeps elevation; outline is flat and transparent; filled uses a soft tint.

InputGroup

Shared chrome and focus ring; pass isInvalid on the group when the inner field is in error so the outer border matches.

Try another query.

Examples: sizes & colorScheme

Sizes sm / md / lg and colorScheme accents on focus ring color (border uses palette 500).

Examples: states & validation

isRequired maps to required + aria-required; errorMessage renders below and sets aria-describedby.

Enter a valid email address.

Examples: native types

Native type and attributes pass through (password, number, search, maxLength, autoComplete, etc.).

Examples: clear & character count

Clear uses data-testid="kv-input-clear"; localize via clearAriaLabel. Counter reads displayed length (after mask processing).

0 / 80

Examples: floating label animation

The native placeholder is hidden; an associated label (htmlFor) carries the same text for screen readers.

Company

Small floating label

Examples: Textarea

forwardRef targets the native textarea; pairs with FormControl the same way as Input.

0 / 120

Floating label

Please enter at least one line.

Examples: mask & composition

Built-in mask (no extra deps). Compose inside Box for card-style layouts.

Controlled: mask filters digits; value syncs with React state.

Stored: (empty)

Groups of four digits; spaces come from the mask pattern.