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.

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