InputControl Edit

InputControl components let users enter and edit text. This is an experimental component intended to (in time) merge with or replace TextControl.

Usage Usage

import { __experimentalInputControl as InputControl } from '@wordpress/components';
import { useState } from '@wordpress/compose';

const Example = () => {
    const [ value, setValue ] = useState( '' );

    return (
        <InputControl
            value={ value }
            onChange={ ( nextValue ) => setValue( nextValue ) }
        />
    );
};

Top ↑

Props Props

disabled disabled

If true, the input will be disabled.

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

isPressEnterToChange isPressEnterToChange

If true, the ENTER key press is required in order to trigger an onChange. If enabled, a change is also triggered when tabbing away (onBlur).

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

hideLabelFromVision hideLabelFromVision

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

  • Type: Boolean
  • Required: No

Top ↑

label label

If this property is added, a label will be generated using label property as the content.

  • Type: String
  • Required: No

Top ↑

labelPosition labelPosition

The position of the label (top, side, or bottom).

  • Type: String
  • Required: No

Top ↑

onChange onChange

A function that receives the value of the input.

  • Type: Function
  • Required: Yes

Top ↑

prefix prefix

Renders an element on the left side of the input.

  • Type: React.ReactNode
  • Required: No

Top ↑

size size

Adjusts the size of the input.
Sizes include: default, small

  • Type: String
  • Required: No
  • Default: default

Top ↑

suffix suffix

Renders an element on the right side of the input.

  • Type: React.ReactNode
  • Required: No

Top ↑

type type

Type of the input element to render. Defaults to “text”.

  • Type: String
  • Required: No
  • Default: “text”

Top ↑

value value

The current value of the input.

  • Type: String | Number
  • Required: Yes