Textarea Component
A textarea component.
Properties
Name | Type | Default | Description |
---|---|---|---|
value | string | '' | The value of the textarea. |
disabled | boolean | false | Indicates whether the textarea is disabled. |
error | boolean | false | Indicates whether the textarea has an error. |
caption | string | '' | The caption text for the textarea. |
label | string | '' | The label for the textarea. |
name | string | '' | The name of the textarea. |
placeholder | string | '' | The placeholder text for the textarea. |
CSS Parts
Name | Description |
---|---|
field | The main container for the textarea. |
label | The label for the input. |
container | The container for the input. |
input | The input element. |
caption | The caption for the textarea. |
Check this link to learn how to use CSS parts for Textarea Component.
CSS Properties
Token | Default | Description |
---|---|---|
--tap-font-family | --tap-sys-font-family | The font family used in the input. |
--tap-input-field-gap | --tap-sys-spacing-4 | The gap between the elements in the input. |
--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-textarea-input-color | --tap-sys-color-content-primary | The color of the input text. |
--tap-textarea-input-line-height | --tap-sys-typography-body-md-height | The line height of the input text. |
--tap-textarea-input-font-size | --tap-sys-typography-body-md-size | The font size of the input text. |
--tap-textarea-input-font-weight | --tap-sys-typography-body-md-weight | The font weight of the input text. |
--tap-textarea-input-placeholder-color | --tap-sys-color-content-tertiary | The color of the placeholder text. |
--tap-textarea-input-placeholder-line-height | --tap-sys-typography-body-md-height | The line height of the placeholder text. |
--tap-textarea-input-placeholder-font-size | --tap-sys-typography-body-md-size | The font size of the placeholder text. |
--tap-textarea-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. |