Textarea

Textarea is an input element that allows users to enter and edit multiline text. It provides a larger input area suitable for longer messages, comments, or user-generated content.

Introduction

The Textarea component offers a user-friendly way to capture and display substantial text content. It is commonly used in forms, comments sections, and any scenario requiring users to input or view multiline text.

Visual representation

The following element is a visual representation of the textarea component which would ideally be used within a form element.

<div class="aegov-form-control">
	<label for="description">Description</label>
	<div class="form-control-input">
		<textarea id="description" name="description" rows="4" placeholder="Enter your description"></textarea>
	</div>
</div>

Code structure

The following is a visual representation of the textarea component in use along with its code usage.

<div class="aegov-form-control">
	<label for="description">...label...</label>
	<div class="form-control-input">
		<textarea id="description" name="description" rows="4" placeholder="placeholder text"></textarea>
	</div>
</div>

A pro tip for textareaes

Always make sure you add the <label> and the ` for="" ` attribute that corresponds to the ID of the textarea field. This is required to maintain accessibility practices and also provides a better user experience.

Variations

Textarea with error message

The "Textarea with Error Message" variation enhances the Textarea component with an error state, visually indicating to users when there is an issue with their Textarea. By applying the class name ` .control-error ` to the ` .aegov-form-control ` class, both the label and error message will be styled with a distinctive red color, drawing attention to the textarea that requires correction.

<div class="aegov-form-control control-error">
	<label for="error_description">Description</label>
	<div class="form-control-input">
		<textarea id="error_description" name="error_description" rows="4" placeholder="Enter your description"></textarea>
	</div>
	<p class="error-message"><strong>Error:</strong> We encountered a problem with your field.</p>
</div>

Size variations

The textarea sizes variation provides three size. These classes allow customization of the label font size and textarea dimensions to suit specific design requirements.

Class	Properties
`.control-sm`	`py-2.5 (0.625rem)` `/* Element height 96px /font-size: 0.85rem` `/ 14px */`
`.control-base`	`py-3 (0.75rem)` `/* Element height 120px /font-size: 1rem` `/ 16px */`
`.control-lg`	`py-3.5 (0.875rem)` `/* Element height 128px /font-size: 1.125rem` `/ 18px */`

<div class="space-y-6">
	<div class="aegov-form-control control-sm">
		<label for="description-sm">Description</label>
		<div class="form-control-input">
			<textarea id="description-sm" name="description-sm" rows="4" placeholder="Enter your description"></textarea>
		</div>
	</div>
	<div class="aegov-form-control">
		<label for="description-base">Description</label>
		<div class="form-control-input">
			<textarea id="description-base" name="description-base" rows="4" placeholder="Enter your description"></textarea>
		</div>
	</div>
	<div class="aegov-form-control control-lg">
		<label for="description-lg">Description</label>
		<div class="form-control-input">
			<textarea id="description-lg" name="description-lg" rows="4" placeholder="Enter your description"></textarea>
		</div>
	</div>																											
</div>

Use of secondary colour

All form elements in the UAE Design System support the use of secondary colour.

Here is an example of the textarea element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.

<div class="aegov-form-control control-secondary">
	<label for="description_sec">Description_sec</label>
	<div class="form-control-input">
		<textarea id="description_sec" name="description_sec" rows="4" placeholder="Enter your description"></textarea>
	</div>
</div>

Behaviour

The Textarea component's behavior is simple and straightforward. Users can click or tap inside the textarea to set the focus and start typing or editing the text.

State

By default, the ` hover ` and ` focus ` state of a textarea has been defined. It is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.

Disabled state

By adding a ` disabled ` attribute to a textarea, you will essentially tell the browser that the textarea is unusable. Disabled state for a textarea would render it visually lighter. Add the ` aria-disabled="true" ` attribute to textarea which is disabled as well as an added measure for assistive technologies.

Description

Accessibility

To ensure accessibility for the Textarea component, follow these guidelines:

Label Association: Associate the ` <label> ` element with the Textarea using the for attribute. This aids screen readers in correctly identifying the Textarea's purpose.
Placeholder Text: Use placeholder attribute for short, non-essential hints. However, avoid using placeholder text as the sole means of providing important instructions.
Error Handling: When displaying error messages, use proper labeling and ARIA attributes to alert screen readers of any issues with the Textarea.
Focus States: Implement clear and distinguishable focus states, such as border or shadow changes, to indicate the currently focused Textarea to keyboard users.
Text Contrast: Ensure sufficient contrast between the text color and the Textarea field background to improve readability.

By adhering to accessibility best practices, you can create an inclusive and user-friendly Textarea component that caters to all users, including those with disabilities.

Responsive element

This component can be resized based on breakpoint prefixes.

You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com

Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.

By applying the ` control-sm `, the ` md:control-base ` and ` 2xl:control-lg ` classes, the textarea dimensions adjust to different screen sizes, ensuring optimal visibility and usability.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

وصف

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Usage

Textarea is a versatile HTML form element used to capture multi-line text input from users. Its primary use is for receiving longer pieces of text, such as comments, messages, descriptions, or other free-form content.

Where to use a textarea?

Textareas are often included in contact forms to allow users to provide detailed messages or inquiries to businesses or individuals.
Textareas are used on blog posts, articles, and social media platforms, enabling users to leave comments, reviews, or feedback.
Textareas are integral to content management systems, enabling authors to compose and edit articles, blog posts, and other textual content.
In messaging applications, textareas provide users with a space to compose and send longer messages or chat responses.
Textareas are employed in note-taking apps and documentation tools, facilitating the input of lengthy notes, instructions, or documentation.