Anatomy
Note: Image is not to scale
- Label
- Value
- Border
- Browser Default drag icon
Options
Resize
The text area can prevent reize by setting canResize to false.
Helper text
The text area has optional helper text.
Behavior
Default
The text area can resize by default.
Error
Success
Required
Guidance
Do not use textarea for single or short inputs
Textarea are for multiline text such as a sentence or a paragraph.
API Reference
InputTextarea
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| children | children | ReactNode | ---- | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | False |
| defaultValue | The initial input element value for uncontrolled components | string | ---- | False |
| disabled | The underlying textarea element disabled attribute | boolean | ---- | False |
| error | if the element has an error | boolean | ---- | False |
| errorMessage | Text displayed below the input to describe the cause of the error | ReactNode | ---- | False |
| helperText | Text displayed below the input to provide additional context | ReactNode | ---- | False |
| label | Label (use instead of Placeholder) | string | ---- | True |
| id | An id attribute to allow the <InputTextarea> to be associated with a <label> element for accessibility purposes | string | ---- | True |
| name | A name attribute to set the name of the associated data point submitted to the server when the form is submitted. | string | ---- | True |
| onBlur | Callback executed when the input fires a blur event | FocusEventHandler<HTMLTextAreaElement> | ---- | False |
| onChange | Callback executed when the input fires a change event | (event: ChangeEvent<HTMLTextAreaElement>) => void | ---- | False |
| onFocus | Callback executed when the input fires a focus event | FocusEventHandler<HTMLTextAreaElement> | ---- | False |
| placeholder | placeholder text | string | ---- | False |
| required | The input elements required attribute | boolean | ---- | False |
| value | The input element value for controlled components | string | ---- | False |
| canResize | Enable to allow for the text area to be resized by the user. | boolean | "false" | ({ "@sm"?: boolean | "false"; "@md"?: boolean | "false"; "@lg"?: boolean | "false"; "@xl"?: boolean | "false"; "@xxl"?: boolean | "false"; "@notSm"?: boolean | "false"; "@notMd"?: boolean | "false"; ... 17 more ...; "@initial"?: boolean | "false"; } & { ...; }) | ---- | False |