# top-10/4.5.1/includes/frontend/blocks/src/post-count/components/unit-control.js

WebberZone Top 10 — Popular Posts, version 4.5.1. 46 lines.

- Page: https://pluginprobe.com/plugins/top-10/4.5.1/code/includes/frontend/blocks/src/post-count/components/unit-control.js
- Raw: https://pluginprobe.com/plugins/top-10/4.5.1/raw/includes/frontend/blocks/src/post-count/components/unit-control.js
- Modified: 2026-09-19T08:21:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/top-10/4.5.1/code/includes/frontend/blocks/src/post-count/components/unit-control.js#L10-L20`.

```javascript
import { TextControl, SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const UnitControl = ( {
	label,
	value,
	unit = 'px',
	onValueChange,
	onUnitChange,
	options = [
		{ label: 'px', value: 'px' },
		{ label: 'em', value: 'em' },
		{ label: '%', value: '%' },
		{ label: 'rem', value: 'rem' },
	],
	style = {},
} ) => {
	return (
		<div className="unit-control" style={ style }>
			<div style={ { display: 'flex' } }>
				<TextControl
					label={ label }
					__nextHasNoMarginBottom
					type="number"
					value={ value }
					onChange={ onValueChange }
					style={ {
						flexGrow: 1,
						marginBottom: 0,
					} }
				/>
				<SelectControl
					label={ __( 'Unit', 'top-10' ) }
					__nextHasNoMarginBottom
					value={ unit }
					options={ options }
					onChange={ onUnitChange }
					style={ { width: 'max-content', marginBottom: 0 } }
				/>
			</div>
		</div>
	);
};

export default UnitControl;

```