---
name: BaseControl
package: '@wordpress/components'
category: Forms
status: stable
canonical: 'https://system.automattic.design/components/basecontrol/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-basecontrol--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/base-control'
---

# BaseControl

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

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

## Props

| Name | Type | 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.<br>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.<br>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` | `boolean` | `false` | 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. |


## Examples

### Default

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

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

### With Help Text

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

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

### With Visual Label

`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.

```tsx
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>
	);
};
```