UnitControl Edit

UnitControl allows the user to set a value as well as a unit (e.g. px).

Usage Usage

import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
    const [ value, setValue ] = useState( '10px' );

    return <UnitControl onChange={ setValue } value={ value } />;
};

Top ↑

Props Props

disabledUnits disabledUnits

If true, the unit <select> is hidden.

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

isUnitSelectTabbable isUnitSelectTabbable

Determines if the unit <select> is tabbable.

  • Type: Boolean
  • Required: No
  • Default: true

Top ↑

onChange onChange

Callback when the value changes.

  • Type: Function
  • Required: No
  • Default: noop

Top ↑

onUnitChange onUnitChange

Callback when the unit changes.

  • Type: Function
  • Required: No
  • Default: noop

Top ↑

size size

Adjusts the size of the input.
Sizes include: default, small

  • Type: String
  • Required: No
  • Default: default

Top ↑

unit unit

Deprecated: Current unit value.
Instead, provide a unit with a value through the value prop.

Example:

<UnitControl value="50%" />
  • Type: String
  • Required: No

Top ↑

units units

Collection of available units.

  • Type: Array<Object>
  • Required: No

Top ↑

value value

Current value. To set a unit, provide a unit with a value through the value prop.

Example:

<UnitControl value="50%" />
  • Type: Number|String
  • Required: No