Published

TextArea

Expand code

Editable Example

import { Text, TextArea } from "@wfp/react";

() => {
  return (
    <TextArea
      fullWidth
      helperText="Optional helperText"
      labelText="The labelText"
      name="inputname"
      rows={4}
    />
  );
};

Prop	Default	Description	Value
fullWidth `boolean`	–	An optional prop that set `width: 100%` style for textarea element	fullWidth
rows `number`	–	Defines the number of visible text lines in the `<textarea>` element.
helperText `ReactNode`	–	Provide text that is used alongside the control label for additional help
labelText `ReactNode`	–	Provide the text that will be read by a screen reader when visiting this control
formItemClassName `string`	–	Provide a custom className that is applied directly to the underlying <textarea> node
inputWrapperClassName `string`	–	Provide a custom className that is applied directly to the underlying <input> or <textarea> node
hideLabel `boolean`	–	Specify whether you want the underlying label to be visually hidden	hideLabel
invalid `any`	–	Specify whether the control is currently invalid. Either a boolean in combination with `invalidText` or an `object`( eg. { message: "Message", …otherErrorProperties }) can be passed.
invalidText `any`	–	Provide the text that is displayed when the control is in an invalid state
additional `ReactNode`	–	Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label
light `boolean`	–		light
placeholder `string`	–	Specify the placeholder attribute for the input
id `string`	–	Provide a unique identifier for the control
name `string`	–	Provide a name for the control
required `boolean`	–	Specify if the control is required (sets aria-invalid as well)	required
disabled `boolean`	–	Specify if the control is disabled (sets aria-disabled as well)	disabled
readOnly `boolean`	–	If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)	readOnly
inline `boolean`	–	Renders the input as inline element for horizontal forms	inline
addonBefore `ReactNode`	–	Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)
addonAfter `ReactNode`	–	Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)
components `AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage`	–	Supports replacement components

TextArea

TextArea

Editable Example

fullWidth

rows

helperText

labelText

formItemClassName

inputWrapperClassName

hideLabel

invalid

invalidText

additional

light

placeholder

id

name

required

disabled

readOnly

inline

addonBefore

addonAfter

components

On this page

References