Textarea

Textarea component is a form element which allows the user to input multiple lines of text.

Design system docs Examples Default Textarea 
<dap-ds-textarea
  label="Message"
  description="This is a description"
  placeholder="Enter your message"
></dap-ds-textarea>
Sizes

The textarea component comes in three sizes: small, and large. The default size is sm.

<dap-ds-stack direction="row">
  <dap-ds-textarea
    size="xs"
    label="Message"
    placeholder="Enter your message"
    feedback="This is a feedback message"
    feedbackType="negative"
  ></dap-ds-textarea>
  <dap-ds-textarea
    label="Message"
    placeholder="Enter your message"
    feedback="This is a feedback message"
    feedbackType="negative"
  ></dap-ds-textarea>
  <dap-ds-textarea
    size="lg"
    label="Message"
    placeholder="Enter your message"
    feedback="This is a feedback message"
    feedbackType="negative"
  ></dap-ds-textarea>
</dap-ds-stack>
Statuses

The textarea component comes in three statuses: default, success, and error. The default status is default.

<dap-ds-stack direction="row">
  <dap-ds-textarea disabled label="Message" placeholder="Disabled"></dap-ds-textarea>
  <dap-ds-textarea readonly value="Readonly" label="Message" placeholder="Read only"></dap-ds-textarea>
  <dap-ds-textarea status="success" label="Message" placeholder="Success"></dap-ds-textarea>
  <dap-ds-textarea status="error" label="Message" placeholder="Error"
    feedback="This is an error message"
    feedbackType="negative"
  ></dap-ds-textarea>
</dap-ds-stack>
Importing 
import { DapDSTextarea } from 'dap-design-system'
Importing React 
import { DapDSTextareaReact } from 'dap-design-system/react'
Tree-Shakeable Imports

For optimal bundle sizes, use the tree-shakeable import syntax:

import { DapDSTextarea } from 'dap-design-system/components'
Attributes
PropertyTypeDefaultDescription
hideCounterbooleanfalseHide character counter.
minlengthnumberThe minimum length of the textarea.
maxlengthnumber, undefinedThe maximum length of the textarea.
rowsnumber, undefined6The number of rows in the textarea.
colsnumber, undefinedThe number of columns in the textarea.
placeholderstring''The placeholder of the textarea.
wrap'hard', 'soft'Indicates how the control should wrap the value for form submission.
size'xs', 'sm' , 'lg'The size of the textarea. Default is md.
disabledbooleanThe disabled state of the textarea.
valuestringThe value of the textarea.
tooltipstringThe tooltip of the textarea.
tooltipPlacement'top', 'right' , 'bottom' , 'left'The tooltip placement of the textarea.
statusInputStatusThe status of the textarea. Can be success or error.
readonlybooleanThe readonly state of the textarea.
requiredbooleanThe required state of the textarea.
labelstringThe label of the textarea.
descriptionstringThe description of the textarea.
feedbackstringThe feedback of the textarea.
feedbackType'negative', 'positive' , 'warning'The feedback type of the textarea. Can be negative, positive, or warning.
optionalbooleanThe optional state of the textarea.
optionalLabelstringThe optional label of the textarea.
subtlebooleanThe weight of the label. Default is false
autofocusbooleanThe autofocus state of the textarea.
Slots
NameDescription
feedback-iconThe custom icon of the feedback.
Events
Event NameDescriptionType
dds-count-changeFires when the count of the textarea changes.{value: number }
dds-changeFired when the textarea value changes.{value: string }
dds-inputFired when the textarea value changes.{value: string }
dds-keydownFired when a key is pressed down.{value: string, originalEvent: Event }
dds-blurFired when the textarea loses focus.{void }
dds-focusEmitted when the textarea gains focus.{void }
dds-selectEmitted when select text in textarea.{value: string }
CSS Parts
Part NameDescription
baseThe main textarea container.
inputThe native input of the textarea.
counterThe counter of the textarea.
counter-baseThe base of the counter.
feedbackThe feedback of the textarea.
feedback-baseThe base of the feedback.
feedback-textThe text of the feedback.
feedback-iconThe icon of the feedback.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-textarea::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-textarea::part(base),
.my-custom-dap-ds-textarea::part(input) {
  /* Shared styles */
}

Example usage:

<dap-ds-textarea class="my-custom-dap-ds-textarea">
  Textarea
</dap-ds-textarea>

.my-custom-dap-ds-textarea::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties
Property NameDescription
--dds-textarea-min-rowsMinimum number of rows in the textarea. Default is 2.
--dds-textarea-spacingGap between elements in the textarea container. Default is var(--dds-spacing-200).
--dds-textarea-gapGap between elements in the textarea container. Default is var(--dds-spacing-200).
--dds-textarea-margin-topTop margin of the textarea. Default is var(--dds-spacing-200).
--dds-textarea-paddingPadding of the textarea control. Default is var(--dds-spacing-200) var(--dds-spacing-300).
--dds-textarea-border-widthBorder width of the textarea. Default is var(--dds-border-width-base).
--dds-textarea-border-colorBorder color of the textarea. Default is var(--dds-border-neutral-base).
--dds-textarea-backgroundBackground color of the textarea. Default is var(--dds-fields-background-default).
--dds-textarea-colorText color of the textarea. Default is var(--dds-text-neutral-base).
--dds-textarea-border-radiusBorder radius of the textarea. Default is var(--dds-radius-base).
--dds-textarea-disabled-bgBackground color when disabled. Default is var(--dds-fields-background-disabled).
--dds-textarea-disabled-colorText color when disabled. Default is var(--dds-text-neutral-disabled).
--dds-textarea-readonly-bgBackground color when readonly. Default is var(--dds-fields-background-read-only).
--dds-textarea-readonly-colorText color when readonly. Default is var(--dds-text-neutral-subtle).
--dds-textarea-error-borderBorder color when in error state. Default is var(--dds-border-negative-base).
--dds-textarea-success-borderBorder color when in success state. Default is var(--dds-border-positive-base).
How to Use CSS Custom Properties

CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:

Method 1: Inline styles (Quick customization)

<dap-ds-textarea
  style="--dds-textarea-min-rows: value; --dds-textarea-spacing: value;">
  Textarea
</dap-ds-textarea>

Method 2: CSS classes (Reusable styles)

.my-custom-dap-ds-textarea {
  --dds-textarea-min-rows: value;
  --dds-textarea-spacing: value;
  --dds-textarea-gap: value;
}

<dap-ds-textarea class="my-custom-dap-ds-textarea">
  Textarea
</dap-ds-textarea>

Method 3: Global theme customization

/* Apply to all instances */
dap-ds-textarea {
  --dds-textarea-min-rows: value;
  --dds-textarea-spacing: value;
}

CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.