DÁP Design System - Textarea webcomponent

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/dist/dds'

Importing React

import { DapDSTextareaReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`hideCounter`	`boolean`	`false`	Hide character counter.
`minlength`	`number`		The minimum length of the textarea.
`maxlength`	`number`, `undefined`		The maximum length of the textarea.
`rows`	`number`, `undefined`	`6`	The number of rows in the textarea.
`cols`	`number`, `undefined`		The number of columns in the textarea.
`placeholder`	`string`	`''`	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`.
`disabled`	`boolean`		The disabled state of the textarea.
`value`	`string`		The value of the textarea.
`tooltip`	`string`		The tooltip of the textarea.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the textarea.
`status`	`InputStatus`		The status of the textarea. Can be `success` or `error`.
`readonly`	`boolean`		The readonly state of the textarea.
`required`	`boolean`		The required state of the textarea.
`label`	`string`		The label of the textarea.
`description`	`string`		The description of the textarea.
`feedback`	`string`		The feedback of the textarea.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.
`optional`	`boolean`		The optional state of the textarea.
`optionalLabel`	`string`		The optional label of the textarea.
`subtle`	`boolean`		The weight of the label. Default is `false`
`autofocus`	`boolean`		The autofocus state of the textarea.

Slots

Name	Description
`feedback-icon`	The custom icon of the feedback.

Events

Event Name	Description
`dds-count-change`	Fires when the count of the textarea changes.
`dds-change`	Fired when the textarea value changes.
`dds-input`	Fired when the textarea value changes.
`dds-keydown`	Fired when a key is pressed down.
`dds-blur`	Fired when the textarea loses focus.
`dds-focus`	Emitted when the textarea gains focus.
`dds-select`	Emitted when select text in textarea.

CSS Parts

Part Name	Description
`base`	The main textarea container.
`input`	The native input of the textarea.
`counter`	The counter of the textarea.
`counter-base`	The base of the counter.
`feedback`	The feedback of the textarea.