Title: BoxControl
Published: March 9, 2021
Last modified: September 4, 2026

---

# BoxControl

## In this article

 * [Props](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#props)
    - [allowReset](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#allowreset)
    - [id](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#id)
    - [inputProps](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#inputprops)
    - [label](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#label)
    - [onChange](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#onchange)
    - [presets](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#presets)
    - [presetKey](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#presetkey)
    - [resetValues](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#resetvalues)
    - [sides](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#sides)
    - [splitOnAxis](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#splitonaxis)
    - [units](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#units)
    - [values](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#values)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#wp--skip-link--target)

See the [WordPress Storybook](https://wordpress.github.io/gutenberg/?path=/docs/components-boxcontrol--docs)
for more detailed, interactive documentation.

A control that lets users set values for top, right, bottom, and left. Can be
 used
as an input control for values like `padding` or `margin`.

    ```language-jsx
    import { useState } from 'react';
    import { BoxControl } from '@wordpress/components';

    function Example() {
      const [ values, setValues ] = useState( {
        top: '50px',
        left: '10%',
        right: '10%',
        bottom: '50px',
      } );

      return (
        <BoxControl values={ values } onChange={ setValues } />
      );
    };
    ```

## 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#props)󠁿

### 󠀁[allowReset](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#allowreset)󠁿

 * Type: `boolean`
 * Required: No
 * Default: `true`

If this property is true, a button to reset the box control is rendered.

### 󠀁[id](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#id)󠁿

 * Type: `string`
 * Required: No

The id to use as a base for the unique HTML id attribute of the control.

### 󠀁[inputProps](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#inputprops)󠁿

 * Type: `UnitControlPassthroughProps`
 * Required: No
 * Default: `{
    min: 0, }

Props for the internal `UnitControl` components.

### 󠀁[label](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#label)󠁿

 * Type: `string`
 * Required: No
 * Default: `__( 'Box Control' )`

Heading label for the control.

### 󠀁[onChange](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#onchange)󠁿

 * Type: `(next: BoxControlValue) => void`
 * Required: No
 * Default: `() => {}`

A callback function when an input value changes.

### 󠀁[presets](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#presets)󠁿

 * Type: `Preset[]`
 * Required: No

Available presets to pick from.

### 󠀁[presetKey](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#presetkey)󠁿

 * Type: `string`
 * Required: No

The key of the preset to apply.
 If you provide a list of presets, you must provide
a preset key to use. The format of preset selected values is going to be `var:preset
|${ presetKey }|${ presetSlug }`

### 󠀁[resetValues](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#resetvalues)󠁿

 * Type: `BoxControlValue`
 * Required: No
 * Default: `{
    top: undefined, right: undefined, bottom: undefined, left: undefined,}

The `top`, `right`, `bottom`, and `left` box dimension values to use when the control
is reset.

### 󠀁[sides](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#sides)󠁿

 * Type: `readonly (keyof BoxControlValue | "horizontal" | "vertical")[]`
 * Required: No

Collection of sides to allow control of. If omitted or empty, all sides will be 
available.

Allowed values are “top”, “right”, “bottom”, “left”, “vertical”, and “horizontal”.

### 󠀁[splitOnAxis](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#splitonaxis)󠁿

 * Type: `boolean`
 * Required: No
 * Default: `false`

If this property is true, when the box control is unlinked, vertical and horizontal
controls
 can be used instead of updating individual sides.

### 󠀁[units](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#units)󠁿

 * Type: `WPUnitControlUnit[]`
 * Required: No
 * Default: `CSS_UNITS`

Available units to select from.

### 󠀁[values](https://developer.wordpress.org/block-editor/reference-guides/components/box-control/?output_format=md#values)󠁿

 * Type: `BoxControlValue`
 * Required: No

The current values of the control, expressed as an object of `top`, `right`, `bottom`,
and `left` values.

First published

March 9, 2021

Last updated

September 4, 2026

Edit article

[ Improve it on GitHub: BoxControl ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/box-control/README.md)

[  Previous: BorderControl](https://developer.wordpress.org/block-editor/reference-guides/components/border-control/)

[  Next: ButtonGroup](https://developer.wordpress.org/block-editor/reference-guides/components/button-group/)