Textarea

Description

The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.

Demos

Textarea with rows and colds

<Textarea
label="Default:"
rows="2"
cols="20"
value="Textarea value
Newline"
on_change={({ value }) => { console.log('on_change', value) }}
on_focus={() => { console.log('on_focus') }}
on_blur={() => { console.log('on_blur') }}
/>

Textarea with placeholder text

<Textarea
label="Placeholder:"
placeholder="Placeholder text"
/>

Vertically placed label

<Textarea
label="Vertical:"
label_direction="vertical"
rows="3"
cols="33"
value="Textarea value with more than 3 lines
Newline
Newline
Newline
Newline"
/>

Stretched horizontally placed label

<Textarea
label="Horizontal:"
stretch="true"
rows="3"
value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

Autoresize with max rows

<Textarea
label="Autogrow:"
rows={1}
autoresize={true}
autoresize_max_rows={4}
placeholder="Placeholder"
on_key_down={({ rows, event }) => {
if (rows >= 4 && event.key === 'Enter') {
event.preventDefault()
}
}}
/>

Max length usage

<Textarea
label="Length limit:"
rows="3"
cols="33"
maxLength="20"
required
value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

With FormStatus failure message

Message to the user
<Textarea
label="Error Message:"
cols="33"
value="Nec litora inceptos vestibulum id interdum donec gravida."
status="Message to the user"
/>

Show failure status

<Textarea
label="Show status:"
status="error"
value="Shows status with border only"
/>

Disabled textarea

<Textarea
label="Disabled:"
disabled
value="Nec litora inceptos vestibulum id interdum donec gravida."
/>

Textarea with a suffix

<Textarea
label="Textarea with suffix:"
value="Nec litora inceptos vestibulum id interdum donec gravida."
suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>