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 label="Message" placeholder="Enter your message"></dap-ds-textarea>
    <dap-ds-textarea size="lg" label="Message" placeholder="Enter your message"></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'

Slots

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

Attributes

Property	Type	Default	Description
`size`	`'sm' 'lg'`		The size of the textarea. Default is `md`. Can be `sm` or `lg`.
`disabled`	`boolean`	`false`	The disabled state of the textarea.
`maxlength`	`number`		The maximum length of the textarea.
`minlength`	`number`		The minimum length of the textarea.
`hideCounter`	`boolean`	`false`	Hide character counter.
`rows`	`number`	`6`	The number of rows in the textarea.
`cols`	`number`		The number of columns in the textarea.
`value`	`string`		The value of the textarea.
`placeholder`	`string`	`''`	The placeholder 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.
`wrap`	`'hard' 'soft'`		Indicates how the control should wrap the value for form submission. Can be `hard` or `soft`.
`feedback`	`string`		The feedback of the textarea.
`feedbackType`	`'info' 'success' 'error'`		The feedback type of the textarea. Can be `info`, `success`, or `error`.
`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`

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.