Automattic Design System

TextareaControl

A complete textarea field with integrated label and description.

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

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`details`		`ReactNode` Additional information about the field, which unlike a normal description, can include links and other semantic elements. Do not use this prop when the content is only plain text; use `description` instead.
`label` Required		`string` The accessible label. All controls must be labeled.
`style`		`CSSProperties` CSS style to apply to the element.
`disabled`		`boolean` Whether the field is disabled.
`value`		`string \| number \| readonly string[] \| undefined` The value to use in controlled mode.
`defaultValue`		`string \| number \| readonly string[] \| undefined` The default value to use in uncontrolled mode.
`className`		`string` CSS class name to apply to the element.
`description`		`string` The accessible description, associated using `aria-describedby`. For screen reader accessibility, this should only contain plain text, and no semantics such as links.
`rows`	`4`	`number` The number of rows the textarea should contain.
`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.
`hideLabelFromVision`	`false`	`boolean` Whether to visually hide the label while keeping it accessible to screen readers.
`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.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <TextareaControl
    label="Label"
    description="This is the description."
    placeholder="Placeholder" />;

const VisuallyHiddenLabel = () => <TextareaControl hideLabelFromVision />;

With DetailsPermalink to this section

const WithDetails = () => <TextareaControl description={undefined} details={DETAILS_EXAMPLE} />;

ResizePermalink to this section

By default, the textarea is resizable in the vertical direction, using the resize handle at the bottom right. Although it is possible to modify or disable this resize behavior through CSS, we generally do not recommend it, as the default behavior is best for usability in most cases.

const Resize = () => <TextareaControl />;

With OverflowPermalink to this section

const WithOverflow = () => <TextareaControl
    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.`} />;

DisabledPermalink to this section

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