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.