BaseControl 
Edit
BaseControl component is used to generate labels and help text for components handling user inputs.
Usage Usage
Render a BaseControl for a textarea input:
import { BaseControl } from '@wordpress/components';
const MyBaseControl = () => (
<BaseControl id="textarea-1" label="Text" help="Enter some text">
<textarea id="textarea-1" />
</BaseControl>
);
Props Props
The component accepts the following props:
id id
The id of the element to which labels and help text are being generated. That element should be passed as a child.
- Type:
String - Required: Yes
label label
If this property is added, a label will be generated using label property as the content.
- Type:
String - Required: No
hideLabelFromVision hideLabelFromVision
If true, the label will only be visible to screen readers.
- Type:
Boolean - Required: No
help help
If this property is added, a help text will be generated using help property as the content.
- Type:
String|WPElement - Required: No
className className
The class that will be added with “components-base-control” to the classes of the wrapper div.
If no className is passed only components-base-control is used.
- Type:
String - Required: No
children children
The content to be displayed within the BaseControl.
- Type:
Element - Required: Yes
BaseControl.VisualLabel BaseControl.VisualLabel
BaseControl.VisualLabel component is used to render a purely visual label inside a BaseControl component.
It should only be used in cases where the children being rendered inside BaseControl are already properly labeled, e.g., a button, but we want an additional visual label for that section equivalent to the labels BaseControl would otherwise use if the label prop was passed.
Usage Usage
import { BaseControl } from '@wordpress/components';
const MyBaseControl = () => (
<BaseControl help="Pressing the Select an author button will open a modal that allows an advanced mechanism for author selection">
<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
<Button>Select an author</Button>
</BaseControl>
);
Props Props
className className
The class that will be added with components-base-control__label to the classes of the wrapper div.
If no className is passed only components-base-control__label is used.
- Type:
String - Required: No
children children
The content to be displayed within the BaseControl.VisualLabel.
- Type:
Element - Required: Yes