TextArea

This component allows users to write or edit text.

Basic Usage

import { TextArea } from '@krakentech/coral';
 
<TextArea label="Text area" />

Properties

defaultValue

<TextArea label="Text area" defaultValue="Roger Nesbit" />

disabled

<TextArea label="Text area" disabled />

error / errorMessage

<TextArea label="Text area" error errorMessage="Please fill out this field" />

optional

<TextArea optional />

placeholder

<TextArea label="Text area" placeholder="Placeholder text" />

rows

<TextArea label="Text area" rows="5" />

theme

<TextArea label="Text area" theme="secondary500" />

value

const [inputValue, setInputValue] = useState('Some value');
 
<TextArea label="Text area" value={inputValue} />
 
<Button
    size="small"
    onClick={() => setInputValue('A different value')}
>
    Change Value
</Button>

Event Handlers

<TextArea
    label="Text area"
    onBlur={() => {}}
    onFocus={() => {}}
    onChange={(event) => {}}
/>

Responsiveness

<TextArea label="Text area" theme={{ base: "secondary500", lg: "base100" }} />

Full API

Design

Good to know

Choose a text area if you want to indicate to a user that they need to or can input multiple lines of text. A text area should make it clear what information is being requested and address any errors related to that info.

Why don’t we indicate mandatory fields?

It is a better user experience when forms are explicit about optional fields by labelling them so, that way the user can be reassured they can proceed without completing it. Therefore in Coral our mandatory fields are the default and optional fields are marked as such.

Why do I need to use a different text area for Hemocyanin and Siphon, they look the same?

When the text area is interacted with the label moves up to the top of the field. This label now sits within a label container which gives the illusion of the cut out at the top. This container matches the colour of the background you’re using, therefore you need to use the text area corresponding to the background colour it is going on.

Customisation

Our text area component has a single variation you can play with. Our components default with properties turned on, however you can choose to toggle on and off the optional label.

Component breakdown

• Corner radius: 12px
• Border: 2px
• Input text: Body 1
• Label container: Caption text
• Left padding: 16px | Right padding: 80px
• Horizontal padding: 16px | Vertical padding: 16px