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 'react';
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
__next40pxDefaultSize
Start opting into the larger default height that will become the default size in a future version.
- Type:
Boolean - Required: No
- Default:
false