Text Field Component

A text field component.

Properties

Name	Type	Default	Description
value	string	''	The value of the text field.
disabled	boolean	false	Indicates whether the text field is disabled.
error	boolean	false	Indicates whether the text field has an error.
caption	string	''	The caption text for the text field.
label	string	''	The label for the text field.
name	string	''	The name of the text field.
placeholder	string	''	The placeholder text for the text field.
inputmode	'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'	undefined	The input mode for the text field.
type	'text' | 'date' | 'month' | 'time' | 'week' | 'datetime-local' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'email'	'text'	The type of the text field.
autocomplete	string	''	The autocomplete attribute for the text field.
max	number	undefined	The maximum value of the text field; only applying to text fields with these types: date, month, week, time, datetime-local, number.
min	number	undefined	The minimum value of the text field; only applying to text fields with these types: date, month, week, time, datetime-local, number.
maxLength	number	undefined	The maximum length of the text field; only applying to text fields with these types: text, search, url, tel, email, password.
minLength	number	undefined	The minimum length of the text field; only applying to text fields with these types: text, search, url, tel, email, password.
pattern	string	undefined	The allowed regex pattern of the text field; only applying to text fields with these types: text, search, url, tel, email, password.
step	number	undefined	The step of the text field; only applying to text fields with these types: date, month, week, time, datetime-local, number.

Slots

Name	Description
leading	the leading slot of the text-field
trailing	the trailing slot of the text-field

CSS Parts

Name	Description
field	The main container for the text field.
label	The label for the text field.
container	The container for the input and any leading/trailing elements.
input	The input element.
caption	The caption for the text field.
leading	The leading for the text field.
trailing	The trailing for the text field.

Check this link to learn how to use CSS parts for Text Field Component.

CSS Properties

Token	Default	Description
--tap-font-family	--tap-sys-font-family	The font family used in the text field.
--tap-input-field-gap	--tap-sys-spacing-4	The gap between the elements in the text field.
--tap-input-label-color	--tap-sys-color-content-primary	The color of the label.
--tap-input-label-line-height	--tap-sys-typography-label-sm-height	The line height of the label.
--tap-input-label-font-size	--tap-sys-typography-label-sm-size	The font size of the label.
--tap-input-label-font-weight	--tap-sys-typography-label-sm-weight	The font weight of the label.
--tap-input-caption-color	--tap-sys-color-content-tertiary	The color of the caption.
--tap-input-caption-line-height	--tap-sys-typography-body-sm-height	The line height of the caption.
--tap-input-caption-font-size	--tap-sys-typography-body-sm-size	The font size of the caption.
--tap-input-caption-font-weight	--tap-sys-typography-body-sm-weight	The font weight of the caption.
--tap-input-container-height	--tap-sys-spacing-11	The height of the container.
--tap-input-container-padding	--tap-sys-spacing-6	The padding inside the container.
--tap-input-container-gap	--tap-sys-spacing-4	The gap between elements in the container.
--tap-input-container-background-color	--tap-sys-color-surface-tertiary	The background color of the container.
--tap-input-container-border-radius	--tap-sys-radius-3	The border radius of the container.
--tap-input-focus-background-color	--tap-sys-color-surface-secondary	The background color of the container when focused.
--tap-input-focus-border-width	--tap-sys-color-border-inverse-primary	The border width of the container when focused.
--tap-text-field-input-color	--tap-sys-color-content-primary	The color of the input text.
--tap-text-field-input-line-height	--tap-sys-typography-body-md-height	The line height of the input text.
--tap-text-field-input-font-size	--tap-sys-typography-body-md-size	The font size of the input text.
--tap-text-field-input-font-weight	--tap-sys-typography-body-md-weight	The font weight of the input text.
--tap-text-field-input-placeholder-color	--tap-sys-color-content-tertiary	The color of the placeholder text.
--tap-text-field-input-placeholder-line-height	--tap-sys-typography-body-md-height	The line height of the placeholder text.
--tap-text-field-input-placeholder-font-size	--tap-sys-typography-body-md-size	The font size of the placeholder text.
--tap-text-field-input-placeholder-font-weight	--tap-sys-typography-body-md-weight	The font weight of the placeholder text.
--tap-input-error-caption-color	--tap-sys-color-content-negative	The color of the caption when there is an error.
--tap-input-error-container-background-color	--tap-sys-color-surface-negative-light	The background color of the container when there is an error.
--tap-input-error-container-border-color	--tap-sys-color-border-negative	The border color of the container when there is an error.
--tap-input-disabled-container-background-color	--tap-sys-color-surface-disabled	The background color of the container when disabled.
--tap-input-disabled-container-color	--tap-sys-color-content-disabled	The color of the text and elements when disabled.
--tap-input-caret-color	--tap-sys-color-surface-accent	The color of the input caret.