InputControl

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

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

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 ?? '' ) }
        />
    );
};

Props

disabled

If true, the input will be disabled.

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

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

hideLabelFromVision

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

  • Type: Boolean
  • Required: No

label

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

  • Type: String
  • Required: No

labelPosition

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

  • Type: String
  • Required: No

onChange

A function that receives the value of the input.

  • Type: Function
  • Required: Yes

prefix

Renders an element on the left side of the input.

  • Type: React.ReactNode
  • Required: No

size

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

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

suffix

Renders an element on the right side of the input.

  • Type: React.ReactNode
  • Required: No

type

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

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

value

The current value of the input.

  • Type: String
  • Required: No