Preview
Anatomy
Code
<usln-textarea
theme="light"
label="Textarea Label"
value="Something that has been typed in there"
status="default"
is-disabled="false"
is-required="false"
has-copy-icon="true"
>
</usln-textarea>
Optional text area with copy icon on the right
Guidelines
The text area is commonly used when the user needs to enter several lines of text. We employ it in forms to enter messages or credentials, or to display editable text, such as code snippets.
- The text area has the same states as the text input, and the same way to display them, including validation states.
Content guidelines
Optional placeholder text
- The content does not to be used instead of label.
- We generally discourage this usage, and shouldn’t be used for information necessary to fill in the field.
- Instead of placeholder text, consider helper text, or even info icon + tooltip.
- It can be displayed on field focus, and hidden on typing.
Behaviour
Scrolling
- The user is able to scroll inside the text area using the scroll bar. Scrolling is introduced when text content exceeds the space provided by the text area.
- Optional placeholder text provides hints or concrete examples of what the user can enter. Placeholder text disappears after the user begins entering data into the input and should not contain crucial information.
Copy
- The text area allows the user to copy the content by clicking on the optional icon button in the right-hand corner. This feature is convenient for pre-filled or partially filled text areas fields, where the user might want to re-use the text elsewhere, such as code snippets.
Character limit
- This is an optional Text area setting, which displays a character counter with a set limit on the number of characters. Define a desired limit per component instance.
- If you define a maximum number of characters, remember it has to be inclusive of all languages users might enter text in.
- On a field with a limit of less than 10 characters, users will see an error once they exceed the character limit, but no warning. On fields with a limit of 10 characters or more, users additionally will be shown a warning when they reach 90% of the character limit.
Validation
Success
The success state is displayed when the data entered is correct or a required field is filled.
Error
An error state is displayed if a required field was left empty.
Character counter with warning and error states
- A warning state is triggered when the user reached or is close to reaching the character limit.
- The error state is triggered when the user has exceeded the character limit.
Do's and Dont's
- Use this component when the expected text is long and will break into several lines
- Use * to indicate required fields, only if we have a mix between required and optional fields
- Don't display generic error messages, such as "You made a mistake" or "There's an error"
- Don't use * to indicate required fields, if all the fields are required.
Variants
Default
Used in any cases where several line of text is required.
Copy button
Used in any cases where the user might need to copy the content.
Character counter
Character counter is an optional feature of the text input component, used to limit the length of the content users enter.
