TextArea

This component allows users to write or edit text.

Basic Usage


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

Text area

Properties

defaultValue


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

Text area

disabled


<TextArea label="Text area" disabled />

Text area

error / errorMessage


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

Text area

Please fill out this field

optional


<TextArea optional />

Text area (optional)

placeholder


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

Text area

rows


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

Text area

theme


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

Text area

value


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

Text field

Event Handlers


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

Responsiveness


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

Text area

Full API

Name	Type	Default
`defaultValue`	`string` If set, a default value will be set for the input.
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`error`	`boolean` If `true`, the component will have error styling set.
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.	`'Invalid input'`
`id`	`string` The id of the input element. If unspecified, an id will be generated internally.
`label`	`string` The accessible label for the text area.
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLTextAreaElement>` Callback fired when the text area loses user focus.
`onChange`	`ChangeEventHandler<HTMLTextAreaElement>` Callback fired each time the user types in the text area.
`onFocus`	`FocusEventHandler<HTMLTextAreaElement>` Callback fired when the text area receives user focus.
`placeholder`	`string` Optionally displays a text hint in the field, before it is populated.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`rows`	`number` Specifies the visible number of lines in a text area.	`3`
`value`	`string \| null` `value` should be supplied by the parent component to control the value of the TextArea input.
`theme`	`ResponsiveVariant<"base100" \| "secondary500">` The colourway applied to this component.	`base100`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`ref`	`Ref<HTMLTextAreaElement> \| undefined` Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`key`	`Key \| null \| undefined`

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