The dimension control allows you create an input where users can enter any valid dimension CSS value. It automatically detects invalid values and notifies the user when that happens.

Example

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimension',
	'settings'    => 'dimension_setting',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'section_id',
	'default'     => '10px',
] );

Usage

<div style="font-size: <?php echo get_theme_mod( 'dimension_setting', '1em' ); ?>">
	<p>The font-size of this paragraph is controlled by "dimension_setting".</p>
</div>