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.
1import { Textarea } from '@devup-ui/components'
2
3export default function Default() {
4 return <Textarea placeholder="Enter your message..." />
5}
61import { Textarea } from '@devup-ui/components'
2
3export default function Default() {
4 return <Textarea placeholder="Enter your message..." />
5}
6Error
Use error and errorMessage to show validation feedback.
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}
121import { 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}
12Disabled Disabled textareas keep the value visible while preventing edits.
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}
121import { 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}
12Colors Override the component color variables to match a custom theme.
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}
181import { 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}
18API
Textarea props extends the textarea HTML attributes.
| Prop | description | Type | Default |
|---|---|---|---|
| typography | Typography token applied to the textarea |
|
|
| error | Whether the textarea is in an invalid state |
|
|
| errorMessage | Validation message shown below the textarea when |
|
|
| rows | Visible text rows |
|
|
| classNames | Custom class names for inner elements |
|
|
| colors | Custom color variables for the textarea |
|
|