Automattic Design System

BaseControl

BaseControl is a low-level component used to generate labels and help text for components handling user inputs.

import { BaseControl } from '@wordpress/components';

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`__nextHasNoMarginBottom`		`boolean` Start opting into the new margin-free styles that will become the default in a future version.
`id`		`string` The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated. This is necessary to accessibly associate the label with that element. The recommended way is to use the `useBaseControlProps` hook, which takes care of generating a unique `id` for you. Otherwise, if you choose to pass an explicit `id` to this prop, you are responsible for ensuring the uniqueness of the `id`.
`help`		`ReactNode` 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`		`ReactNode` If this property is added, a label will be generated using label property as the content.
`hideLabelFromVision`	`false`	`boolean` If true, the label will only be visible to screen readers.
`className`		`string`
`children` Required		`ReactNode` The content to be displayed within the `BaseControl`.
`as`		`keyof IntrinsicElements \| JSXElementConstructor<any> \| null \| undefined` The HTML element or React component to render the component as.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = ( props ) => {
	const { baseControlProps, controlProps } = useBaseControlProps( props );

	return (
		<BaseControl { ...baseControlProps }>
			<textarea style={ { display: 'block' } } { ...controlProps } />
		</BaseControl>
	);
};

With Help TextPermalink to this section

const WithHelpText = ( props ) => {
	const { baseControlProps, controlProps } = useBaseControlProps( props );

	return (
		<BaseControl { ...baseControlProps }>
			<textarea style={ { display: 'block' } } { ...controlProps } />
		</BaseControl>
	);
};

With Visual LabelPermalink to this section

BaseControl.VisualLabel 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 accessibly 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.

const WithVisualLabel = ( props ) => {
	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';

	return (
		<BaseControl { ...props }>
			<BaseControl.VisualLabel>Visual label</BaseControl.VisualLabel>
			<div>
				<Button __next40pxDefaultSize variant="secondary">
					Select an author
				</Button>
			</div>
		</BaseControl>
	);
};