Input

Текстовые поля и многострочный Textarea: размеры, цветовые схемы, маски (Input), валидация и нативные атрибуты HTML. Справка — в шапке Документация → Input.

Примеры: базовые

Field demo

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

Примеры: 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.

Примеры: размеры и colorScheme

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

Примеры: состояния и валидация

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

Enter a valid email address.

Примеры: нативные type

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

Примеры: clear и счётчик maxLength

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

0 / 80

Примеры: анимация плавающей подписи

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

Company

Small floating label

Примеры: Textarea

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

0 / 120

Floating label

Please enter at least one line.

Примеры: маска и композиция

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.