Text Field

About

The design system's text input field (single or multi-line), with form validation, prefix/suffix icons, and a stable height.

variant: primary (default, filled + border + shadow), secondary (elevated background, no shadow), flat (flat border, no shadow, ideal for auth screens), tonal (surfaceSecondary background, no border), or embedded (transparent, no border/shadow — used inside TextFieldGroup)
size: medium (default, 45px, 16px text; use for forms, especially on phones) or small (40px, 14px text; for dense desktop areas like sidebars and panels, matching the small KasyButton). The placeholder always matches the text size
contentType: text (default), email, password (adds a show/hide toggle), or phone (numeric keyboard + digit formatter)
label / showRequiredIndicator: field label and optional red asterisk
description / errorText / isInvalid: help text and error state
prefix / suffix: widgets on the sides (icons, buttons)
maxLength: shows a character counter
maxLines / minLines: single-line field (default) or multi-line
enabled / readOnly / autofocus / obscureText: standard states
validator / onSaved / onChanged / onSubmitted: form integration
focusBorder / forceFocusBorder: controls whether the focus (accent) border appears; forceFocusBorder paints the field as "active" without it actually being focused (used by composite triggers like DatePicker)

Single-line height is fixed at 45px (singleLineHeight), matching the medium KasyButton, to keep visual consistency between fields and buttons.

Loading the component…

Last updated on 11/03/2026