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. |