Textarea

Textareas allows the user to enter multiple lines of text. They have a default height and oftentimes allow the user to adjust the height as needed.

Overview

Resources

Install

yarn add @activecampaign/camp-components-textarea

Usage

Default

Most commonly, textareas include a label, placeholder, and helper text. The placeholder should never be used for text that is important to how to use a specific feature, as it disappears when the user begins typing. Use helper text for field descriptions.

<Textarea
    helperText="This feedback is anonymous"
    label="Customer Feedback"
    placeholder="Insert your feedback here."
/>

Required

When a textarea is required, a small asterix appears next to the label. The textarea should enter an invalid state if a user attempts to submit a form without completing a required field.

<Textarea
    required
    helperText="This feedback is anonymous"
    label="Customer Feedback"
    placeholder="Insert your feedback here."
/>

Height

The textarea has a default minimum height applied of 115px. The user can always click and drag the textarea’s bottom right corner to adjust the height of the textarea. To adjust the minimum height of the textarea, set hasMinHeight and then apply the height via fieldStyles.

<Textarea
    hasMinHeight
    fieldStyles={{"height":300}}
    helperText="This feedback is anonymous"
    label="Customer Feedback"
    placeholder="Insert your feedback here."
/>

Character limit

Applying a character limit will add a character couter in the bottom right of the textarea. If a user reaches the character limit, typing becomes disabled and the character counter turns red to indicate that the limit has been reached.

<Textarea
    characterLimit={50}
    helperText="This feedback is anonymous"
    label="Customer Feedback"
    placeholder="Insert your feedback here."
/>

Invalid

If a required field is not completed, or the content entered is invalid, the textarea should enter an invalid state.

<Textarea
    invalid
    helperText="This feedback is anonymous"
    label="Customer Feedback"
    placeholder="Insert your feedback here."
/>

Disabled

<Textarea
    disabled
    helperText="This feedback is anonymous"
    label="Customer Feedback"
    placeholder="Insert your feedback here."
/>