Devup UI - Textarea

Textarea

Textarea

Textarea component is used for multi-line text input, such as messages, comments, and descriptions.

Examples

Default Basic textarea for multi-line user input.

Show Code

1import { Textarea } from '@devup-ui/components'
2
3export default function Default() {
4    return <Textarea placeholder="Enter your message..." />
5}
6

1import { Textarea } from '@devup-ui/components'
2
3export default function Default() {
4    return <Textarea placeholder="Enter your message..." />
5}
6

Please enter at least 10 characters.

Error Use error and errorMessage to show validation feedback.

Show Code

1import { Textarea } from '@devup-ui/components'
2
3export default function Error() {
4    return (
5        <Textarea
6            error
7            errorMessage="Please enter at least 10 characters."
8            placeholder="Describe your request..."
9        />
10    )
11}
12

1import { Textarea } from '@devup-ui/components'
2
3export default function Error() {
4    return (
5        <Textarea
6            error
7            errorMessage="Please enter at least 10 characters."
8            placeholder="Describe your request..."
9        />
10    )
11}
12

Disabled Disabled textareas keep the value visible while preventing edits.

Show Code

1import { Textarea } from '@devup-ui/components'
2
3export default function Disabled() {
4    return (
5        <Textarea
6            defaultValue="This message is read-only."
7            disabled
8            placeholder="Disabled textarea"
9        />
10    )
11}
12

1import { Textarea } from '@devup-ui/components'
2
3export default function Disabled() {
4    return (
5        <Textarea
6            defaultValue="This message is read-only."
7            disabled
8            placeholder="Disabled textarea"
9        />
10    )
11}
12

Colors Override the component color variables to match a custom theme.

Show Code

1import { Textarea } from '@devup-ui/components'
2
3export default function Colors() {
4    return (
5        <Textarea
6            colors={{
7                primary: '#2563EB',
8                border: '#BFDBFE',
9                background: '#EFF6FF',
10                placeholder: '#60A5FA',
11                focusRing: 'rgba(37, 99, 235, 0.18)',
12            }}
13            placeholder="Custom themed textarea"
14            rows={4}
15        />
16    )
17}
18

1import { Textarea } from '@devup-ui/components'
2
3export default function Colors() {
4    return (
5        <Textarea
6            colors={{
7                primary: '#2563EB',
8                border: '#BFDBFE',
9                background: '#EFF6FF',
10                placeholder: '#60A5FA',
11                focusRing: 'rgba(37, 99, 235, 0.18)',
12            }}
13            placeholder="Custom themed textarea"
14            rows={4}
15        />
16    )
17}
18

API

Textarea props extends the textarea HTML attributes.

Prop	description	Type	Default
typography	Typography token applied to the textarea	`keyof DevupThemeTypography`	`undefined`
error	Whether the textarea is in an invalid state	`boolean`	`false`
errorMessage	Validation message shown below the textarea when `error` is true	`string`	`undefined`
rows	Visible text rows	`number`	`3`
classNames	Custom class names for inner elements	`{ container?: string textarea?: string errorMessage?: string }`	`undefined`
colors	Custom color variables for the textarea	`{ primary?: string error?: string text?: string border?: string background?: string placeholder?: string focusRing?: string }`	`undefined`