Skip to content
Telescope
Components

Textarea

A form element that enables users to enter text on multiple lines.

Basic usage

First, import the component.

import {Textarea} from '@pleo-io/telescope'

Then use it, like so:

<Textarea label="Description" name="description" />

API reference

The component accepts the following props.

PropTypeDefault
aria-label
string
className
string
disabled
boolean
fixedHeight
string
isInvalid
boolean
false
isRequired
boolean
label
string
name*
string
renderError
Function
showCounter
boolean
false
value
string
null

Examples

See the guidelines page for information around when and why to use the various options.

Required

To ensure accessibility, use the isRequired property (not the HTML required property) to mark a field as required for assistive technologies (such as screen readers).

Information:
Visually, you should mark the minority of fields in a form as "required" or "optional".
<Textarea name="description" label="Description (required)" rows="3" isRequired />

Invalid

Use the isInvalid property to mark the field as invalid both visually (for sighted users) and for assistive technologies (such as screen readers).

Information:
Always provide a clear error message when marking a field as invalid.
<Textarea name="description" label="Description" rows="3" isInvalid />

Advanced use cases

For advanced use cases and layouts, use this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports features such as hint text, help popovers and error messages.

<FormControl>
    <FormControl.Label>Descriptions</FormControl.Label>
    <Textarea name="description" rows="3" />
</FormControl>

Usage with formik

For the sake of convenience, we provide a Formik version of this component. By using the `useField` hook it automatically handles value changes, blur events, error messages, and touched state for you. We recommend Yup for form validation.

Information:
The validation behaviour of the Formik component may not always be inline with those in our Form guidelines, so please review before usage.
<Formik
    initialValues={{description: ''}}
    onSubmit={(data) => alert(JSON.stringify(data, null, 2))}
    validationSchema={yup.object().shape({
        description: yup.string().required('Enter a description'),
    })}
>
    <Form>
        <Stack space={24}>
            <FormikTextarea label="Name" name="description" rows="3" isRequired />
            <Button type="submit">Submit</Button>
        </Stack>
    </Form>
</Formik>

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

On this page