Title: ContentEditableControl
Published: July 12, 2026

---

# ContentEditableControl

## In this article

 * [Props](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#props)
    - [className](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#classname)
    - [disabled](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#disabled)
    - [hideLabelFromVision](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#hidelabelfromvision)
    - [help](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#help)
    - [label](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#label)
    - [placeholder](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#placeholder)
    - [required](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#required)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#wp--skip-link--target)

🔒 This component is locked as a [private API](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/).
We do not yet recommend using this outside of the Gutenberg project.

See the [WordPress Storybook](https://wordpress.github.io/gutenberg/?path=/docs/components-contenteditablecontrol--docs)
for more detailed, interactive documentation.

A presentational `contentEditable` form control: a labeled editable element
 rendered
with the chrome (`BaseControl` + label) shared by the other form controls in the
package.

Unlike the in-canvas `RichText` from `@wordpress/block-editor`, this control
 is
intended for standalone form fields (DataForms, sidebar inputs, etc.). It is deliberately**
presentational only** and has no `@wordpress/rich-text` dependency: the editable
behavior (value, formatting, keyboard shortcuts) and any focus/selection tracking
are owned by the consumer, which wires them through the forwarded ref and native
event props (see the richtext DataForm control in `@wordpress/dataviews` for the
canonical assembly).

    ```language-jsx
    // The rich-text "assembly" lives in the consumer.
    <ContentEditableControl
        label="Caption"
        ref={ mergedRef }
        onFocus={ onEditableFocus }
        onBlur={ onEditableBlur }
    />
    ```

## 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#props)󠁿

### 󠀁[className](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#classname)󠁿

 * Type: `string`
 * Required: No

### 󠀁[disabled](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#disabled)󠁿

 * Type: `boolean`
 * Required: No
 * Default: `false`

Whether the field is non-editable. A disabled field is not
 `contentEditable` (so
it is neither focusable nor editable) and exposes `aria-disabled` to assistive technology.

### 󠀁[hideLabelFromVision](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#hidelabelfromvision)󠁿

 * Type: `boolean`
 * Required: No
 * Default: `false`

If true, the label will only be visible to screen readers.

### 󠀁[help](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#help)󠁿

 * Type: `ReactNode`
 * Required: No

Additional description for the control.

Only use for meaningful description or instructions for the control. An element 
containing the description will be programmatically associated to the BaseControl
by the means of an `aria-describedby` attribute.

### 󠀁[label](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#label)󠁿

 * Type: `string`
 * Required: Yes

Label text for the control.

### 󠀁[placeholder](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#placeholder)󠁿

 * Type: `string`
 * Required: No

Placeholder text shown while the element has no content. Exposed to
 assistive technology
via `aria-placeholder` and drawn by the stylesheet when the element is empty.

### 󠀁[required](https://developer.wordpress.org/block-editor/reference-guides/components/content-editable-control/?output_format=md#required)󠁿

 * Type: `boolean`
 * Required: No
 * Default: `false`

Whether the field is required. Exposed to assistive technology via
 `aria-required`.

First published

July 12, 2026

Last updated

July 12, 2026

Edit article

[ Improve it on GitHub: ContentEditableControl ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/content-editable-control/README.md)

[  Previous: ConfirmDialog](https://developer.wordpress.org/block-editor/reference-guides/components/confirm-dialog/)

[  Next: CustomSelectControl](https://developer.wordpress.org/block-editor/reference-guides/components/custom-select-control/)