Automattic Design System

Textarea

A low-level primitive for a textarea field.

Prefer TextareaControl when using with a standard label and description.

import { Textarea } from '@wordpress/ui';

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`render`		`ComponentRenderFn<HTMLAttributesWithRef<any>> \| ReactElement<Record<string, unknown>, string \| JSXElementConstructor<any>> \| undefined` Replaces the component’s default HTML element using a given React element, or a function that returns a React element.
`style`		`CSSProperties` CSS style to apply to the element.
`className`		`string` CSS class name to apply to the element.
`defaultValue`		`string \| number \| readonly string[] \| undefined` The default value to use in uncontrolled mode.
`disabled`		`boolean` Whether the field is disabled.
`value`		`string \| number \| readonly string[] \| undefined` The value to use in controlled mode.
`onValueChange`		`(value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element \| undefined; }) => void` Callback fired when the `value` changes. Use when controlled.
`rows`	`4`	`number` The number of rows the textarea should contain.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <Textarea placeholder="Placeholder" aria-label="Value" />;

DisabledPermalink to this section

const Disabled = () => <Textarea disabled />;

With OverflowPermalink to this section

const WithOverflow = () => <Textarea
    defaultValue={`Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`} />;

With One RowPermalink to this section

When rows is set to 1, the textarea will have the same footprint as a default Input.

const WithOneRow = () => <Textarea rows={1} />;