LogoLogo
  • Release Notes
  • Downloads
  • Frequently Asked Questions
  • Developers
    • Introduction
    • Color Variables
    • Font Family
    • Vanilla JS
    • React
    • Vue
    • Angular
    • RTL Support
    • Light Mode/Dark Mode
  • Foundations
    • Typography
    • Colors
    • Icons & Visuals
    • Images
    • Layout & Breakpoints
    • Utils
    • Usability Guidelines
  • Components
    • Accordions
      • Accordion
      • Accordion Groups
    • Alert
    • Attach File
    • Avatar
    • Banner Cards
    • Breadcrumbs
    • Buttons
      • Button
      • Icon Button
      • Link Button
      • Social Media Buttons
      • Split Button
    • Checkbox
      • Checkbox Input
      • Checkbox Groups
    • Chips
    • Credit Card
    • Credit Card Input Field
    • Header
    • Interactive Banner
    • Number Field
    • Menu
    • Pagination
    • Phone Number Field
    • Progress Indicators
      • Expectation Levels
      • Progress Bar
      • Progress Circle
      • Progress Semi-Circle
    • Quick Select Field
    • Radio Buttons
      • Radio Input
      • Radio Buttons Groups
    • Search Input Field
    • Segmentation
      • Segmented Controls
      • Segmented Tabs
    • Select Input Field
    • Slider
    • Steps
      • Stepper
      • Step Indicator
    • Sticky Bar
    • Tabs
    • Text Area Field
    • Text Field
    • Toggle Switch
    • Tooltip
Powered by GitBook
On this page
  • Overview
  • Usage
  • When to use this component?
  • How it works
  • Code
  • Properties
  • Anatomy
  • Anatomy Options
  • Dos and Don'ts
Export as PDF
  1. Components

Text Area Field

Text Area is a multi-line text input component used to capture long-form user input.

PreviousTabsNextText Field

Last updated 2 months ago

Overview

Usage

When to use this component?

Text area fields are used in forms and input scenarios where users need to provide larger amounts of text, such as comments, descriptions, or messages. They are ideal for situations requiring more space than a standard text field, enabling users to input detailed information.

How it works

A text area field component typically includes a label, a multi-line input area, and optional elements like helper or placeholder text for user guidance. It can display different states, such as focused, filled, or error, indicating its current status. Text area fields are essential interactive elements in forms and interfaces where extensive user input is needed.

Code

<dda-textarea
    placeholder="Enter description"
    label="Description"
    max_characters="200"
    value=""
    helper_text="This is a helper text"
    error_message=""
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="textarea"
    onchange="console.log('changed')"
></dda-textarea>
   <DdaTextarea
            placeholder="Enter description"
            label="Description"
            max_characters="200"
            value=""
            helper_text="This is a helper text"
            error_message=""
            custom_class=""
            component_mode=""
            input_id="input"
            aria_label="textarea"
            onchange="console.log('changed')"
        ></DdaTextarea>
    <DdaTextarea
            placeholder="Enter description"
            label="Description"
            max_characters="200"
            value=""
            helper_text="This is a helper text"
            error_message=""
            custom_class=""
            component_mode=""
            input_id="input"
            aria_label="textarea"
            onchange="console.log('changed')"
></DdaTextarea>
<dda-textarea
    placeholder="Enter description"
    label="Description"
    max_characters="200"
    value=""
    helper_text="This is a helper text"
    error_message=""
    custom_class=""
    component_mode=""
    input_id="input"
    aria_label="textarea"
    onchange="console.log('changed')"
></dda-textarea>

Properties

Property
Description
Type

aria_label

An optional string that provides an accessible label for the input field, improving accessibility for screen readers. It helps users with visual impairments understand the purpose of the input field.

string

component_mode

An optional string that can be used to apply a specific mode or variation of the component, such as a 'light' or 'dark' state, for customization.

string

custom_class

A string that allows you to pass custom CSS classes to further customize the styling of the input container.

string

enable_rich_editor

A boolean value that determines whether to enable a rich text editor (using the Quill library). If true, the Quill editor is rendered; if false, a standard textarea is displayed.

boolean

error_message

A string containing an error message to be displayed when the input validation fails. This will appear below the input field when an error occurs.

string

helper_text

A string providing additional guidance or information about the input field. It can be displayed below the input to assist the user.

string

input_id

A unique string identifier for the input field. This is used to link the label with the input and for accessibility purposes.

string

input_status

A string that allows customization of the input’s visual appearance depending on its status (e.g., active, disabled, etc.). This is used for styling purposes.

string

label

A string that sets the label text for the textarea or rich text editor. This is displayed above the input field to provide context or instructions.

string

max_characters

A number specifying the maximum allowed characters in the input field. This is used to restrict the user’s input and is displayed in the helper or error message.

number

placeholder

A string that sets the placeholder text inside the textarea or rich text editor when it is empty.

string

validation_type

An optional string that defines the type of validation applied to the input. It could affect the styling or behavior based on different validation scenarios.

string

value

The initial value of the textarea or rich text editor. It will bind to the content inside the input and can be used to set its initial state.

string

Anatomy

Anatomy Options

Label: A title or descriptor for the input field, guiding users on what information to enter.

Lead-Icon: An optional icon that provides additional context or represents the type of input required.

Placeholder: Sample text displayed within the input field that hints at the expected input format or content.

Caption: Helper or footer text that offers further instructions or clarifications for the input.

Trail-Text: A counter or indicator often used to show the number of characters entered or remaining, providing feedback on input limits.

Dos and Don'ts

Dos
Don'ts

Use text area fields for inputs that require multiple lines of text.

Don't use text area fields for short or single-line inputs; use standard text fields for those.

Provide a clear and concise label that describes the expected input.

Avoid using ambiguous or unclear labels for text area fields.

Include placeholder text to give users an example of the expected input format.

Don't rely solely on placeholder text for essential instructions.

Ensure text area fields are large enough to be easily tappable or clickable.

Avoid making text area fields too small to interact with comfortably.

Use helper text to provide additional context or instructions.

Don't overload the text area field with too much information.

Validate input and provide clear error messages when necessary.

Don't provide generic error messages that don't help users understand the issue.

Keep consistent styling and spacing across all text area fields in the application.

Don't use inconsistent styles that may confuse users.