Skip to content

Demos

Textarea with rows and colds

<Textarea
label="Default:"
rows="2"
cols="20"
value="Textarea value
Newline"
spellCheck={false}
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"
/>

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>}
/>