@foundationcomponentrepo/text-area

Base text-area component for foundation

Props

size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';

The size prop can be used to set the size/height of the text-area component

for 'xs' size:
  height: 128px; (2 lines)

for 'sm' size:
  height: 152px; (4 lines)

for 'md' size:
  height: 176px; (6 lines)

for 'lg' size:
  height: 224px; (8 lines)

for 'xl' size:
  height: 272px; (10 lines)

placeholder: string;

The placeholder prop can be used to set the placeholder of the text-area component

id: string;

The id prop can be used to set the id of the text-area component

name: string;

The name prop can be used to set the name of the text-area component

value: string;

The value prop can be used to set the value of the text-area component. Can be used alongside the onChange function

disabled: boolean;

The disabled prop can be used to set the disabled status of the text-area component

phase: 'default' | 'success' | 'invalid' | 'error';

The phase prop can be used to set the phase of the text-area component

for 'default' phase:
  border-color: default;
  text-color: default;

for 'success' phase:
  border-color: default;
  text-color: green;

for 'invalid' phase:
  border-color: red;
  text-color: red;

for 'error' phase:
  border-color: red;
  text-color: default;

onChange: (e: any) => void;

The onChange prop can be used to pass a function that is supposed to handle the change in the text, that is being entered into the text-area

Install

npm install --save @foundationcomponentrepo/text-area

License

MIT © unplatforms