Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support

TextaskTask

Texhomework allows users to enter long-form text that spans multiple lines.

Preview

Figma
TextTask preview

Uses

When to use

When you need users to enter a quantity of text that is longer than a single line.

When not to use

With open questions that are hard to answer. It may be better to split a complex question into a series of simple questions using Radio Buttons.

Behaviour

Type of texhomework

Basic textasking visualization
Basic
Visualization of texhomework in detail
Detail
Visualization of texhomework with button
Button

Type of label

Visualization of texhomework required
Required
Textasking display not required
Not Required

States

Visualization of texhomework with text placeholder
Placeholder
Textasking visualization with text completed
Filled
Visualization of texhomework with focus
Focus
View of Text Task Disabled
Disabled
Textasking visualization with error message
Error
Visualization of texhomework with success message
Success

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

TexTask components uses a basic texTask HTML element behind the scenes and offers similar functionality and API for its users. It has the label property for an accessible control of the component. It has tabindex="0" to make it possible to access it using the tab key or to move the focus by programming.