Textarea
<gcds-textarea>

Also called: text box.

A textarea is a space to enter long-form information in response to a question or instruction.

• GitHub
• Figma

On this page

• Coding and accessibility for textareas
• Examples
• Code builder

Coding and accessibility for textareas

Apply required attributes

Always use the following required attributes with gcds-textarea:

• name
• label
• textarea-id

Size the field to fit the response

• Use the rows attribute to set the height of a textarea to match the amount of text you expect someone to enter.
• Use input for responses that need less than 75 characters.
• Avoid setting the width lower than 50%.
• Use the maximum height of 7 rows for responses without a fixed length.

Add hint text

• Use the hint attribute to add hint text.

• Avoid adding hint text in the field where it will disappear once the field is selected or a response starts to be entered.

Hide the label

• Set the hide-label attribute to true to visually hide the label while maintaining it for assistive technologies.

• Avoid adding hint text when the label is hidden.

Add validation and error messages

• Use the required attribute to activate the built-in error messages and validation for textarea.
• Fields with specific input requirements will validate if the entry is invalid, even if it is not required.
• For optional fields that need validation, like email address formats, add custom validation with a custom error message.

In this section

• Essential attributes
• Optional attributes

label

The label attribute defines the label for the textarea.

<gcds-textarea textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

name

The name attribute identifies the textarea component within a form. It is used to reference the textarea’s value when a form is submitted.

<gcds-textarea textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

textarea-id

The textarea-id attribute specifies the unique identifier for the textarea.

<gcds-textarea textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

autofocus

The autofocus attribute controls whether the textarea will be focused automatically when the page loads. By default, it is set to false. When set to true, the textarea is focused on render.

<gcds-textarea autofocus textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

cols

The cols attribute defines the visible width of the textarea in average character widths. The minimum width is 50% of its container.

<gcds-textarea cols="8" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

disabled

The disabled attribute controls whether the textarea is disabled or not. By default, it is set to false.

<gcds-textarea disabled textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

error-message

The error-message attribute defines the error message to display for an invalid textarea.

<gcds-textarea error-message="Error message" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

form

The form attribute specifies the ID of the form that the textarea belongs to.

<gcds-textarea form="form-id" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

hide-label

The hide-label attribute controls whether the label is hidden or not.

<gcds-textarea hide-label textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

hide-limit

The hide-limit attribute controls whether the character limit counter is displayed or not. When set to true, the character limit counter is not displayed. By default, it is set to false.

<gcds-textarea hide-limit maxlength="20" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

hint

The hint attribute defines the hint text displayed under the label.

<gcds-textarea hint="Hint / Example message." textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

maxlength

The maxlength attribute defines the maximum number of characters that the textarea field can accept.

<gcds-textarea maxlength="10" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

minlength

The minlength attribute defines the minimum number of characters that the textarea field can accept.

<gcds-textarea minlength="5" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

required

The required attribute controls whether the textarea field is required or not. When set to true, it adds “required” after the label, and activates the required validator.

<gcds-textarea required textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

rows

The rows attribute defines the number of visible text rows in the textarea, which determines its height.

<gcds-textarea rows="3" textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

validate-on

The validate-on attribute defines the validation event for the textarea.

<gcds-textarea validate-on="other" required textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

value

The value attribute sets the initial content of the textarea. It updates to reflect the value entered by the user.

<gcds-textarea value="Textarea content." textarea-id="textarea-example" label="Label" name="textarea-example">
</gcds-textarea>

Code builder

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.