React

import { Textarea } from '@sky-uk/ui-core';

Textarea is a form component that closely matches the native textarea element and supports its key properties. (See MDN).

<Textarea />

System Modifiers

The Textarea component accepts props applied using the following system modifiers:

• flex-child
• grid-child
• margin
• position
• width

Field

You can combine the Textarea component with the Field component to add information like label and validation message.

Placeholder

You can provide placeholder attribute that will be displayed on focus. placeholder attribute is independent from Label.

<Field>
    <Field.Label htmlFor="my-input">Label</Field.Label>
    <Field.Control as={Textarea} placeholder="my placeholder" id="my-textarea" aria-describedby="message" />
    <Field.Message id="message">Your message goes here!</Field.Message>
</Field>

Custom Textarea/Other Inputs

The wrapping component used to build the Textarea component is also available to use, should you need to create your own textarea/other inputs with extended functionality

This is provided for cases where you may need to build your own input that works a different way.

• InputWrapper: A div with pre-applied input styles.

import { InputWrapper } from '@sky-uk/ui-core';

<InputWrapper />

Accessibility

Please refer to the W3C Forms Concepts guide when working with forms.