Menu


Form

TextArea

Storybook

The TextArea component is a React component that allows the user to input multiple lines of text

Import
1import { TextArea } from 'dd360-ds'
1import TextArea from 'dd360-ds/TextArea'
Usage
1import { TextArea } from 'dd360-ds'
2
3<TextArea />
Variants

You can use the following variants: "default", "active", "success", "warning", "error" and "disabled". By default "active" is used.

Default
Active
Success
Warning
Error
Disabled
1import { TextArea } from 'dd360-ds'
2
3<TextArea variant='default' />
4<TextArea variant='active' />
5<TextArea variant='success' />
6<TextArea variant='warning' />
7<TextArea variant='error' />
8<TextArea variant='disabled' />
Placeholder

Use the prop "placeholder" to indicate a help to the user about what information to enter in your TextArea component.

1import { TextArea } from 'dd360-ds'
2
3<TextArea placeholder='I am a placeholder!' />
Label

Use the prop "label" to indicate a help to the user about what information to enter in your TextArea component.

1import { TextArea } from 'dd360-ds'
2
3<TextArea label='I am a label!' />
TextArea With Icon

You can add an icon to the TextArea component by passing the prop startAdornment that receives a react component.

1import { TextArea } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<TextArea endAdornment={<DynamicHeroIcon icon='AcademicCapIcon' className='text-blue-700 w-6' />} />
isRequired

With the prop isRequired you can mark an textArea as required. Setting isRequired to true will add an asterisk (*) next to the entry to indicate that its completion is required. This functionality is especially useful for highlighting the need to fill in certain fields on forms or user interfaces.

1import { TextArea } from 'dd360-ds'
2
3<TextArea isRequired label='This field is required' />
classNameTextArea

With the prop classNameTextArea you can customize the textArea, being able to enlarge it, shrink it and several other things according to your needs.

1import { TextArea } from 'dd360-ds'
2
3<TextArea classNameTextArea='h-48' />
API Reference
NameTypesDefault
"variant"
active
disabled
warning
success
error
default
default
"inputBlank"
boolean
false
"disabled"
boolean
false
"endAdornment"
ReactNode
-
"classNameAdornment"
string
-
"message"
string
-
"label"
string
-
"placeholder"
string
-
"paddingX"
string
-
"paddingY"
string
-
"rounded"
string
-
"large"
string
-
"role"
string
-
"boxShadow"
string
-
"isRequired"
boolean
-
"className"
string
-
"classNameTextArea"
string
-