CustomSelectControl – Automattic Design System

Import

import { CustomSelectControl } from '@wordpress/components';

Props

Name	Type	Required	Description
`className`	`string`		Optional classname for the component.
`hideLabelFromVision`	`boolean`		Hide the label visually, while keeping available to assistive technology.
`describedBy`	`string`		Description for the select trigger button used by assistive technology. If no value is passed, the text “Currently selected: selectedItem.name” will be used fully translated.
`label`	`string`	Yes	Label for the control.
`onChange`	`( newValue: CustomSelectChangeObject< NoInfer< T > > ) => void`		Function called with the control’s internal state changes. The `selectedItem` property contains the next selected item.
`options`	`ReadonlyArray< T >`	Yes	The list of options that can be chosen from.
`size`	`'default' \| 'small' \| '__unstable-large'`		The size of the control. @default ‘default’
`value`	`NoInfer< T >`		Can be used to externally control the value of the control.
`showSelectedHint`	`boolean`		Show the hint of the selected item in the trigger button. @default false
`__next40pxDefaultSize`	`boolean`		Start opting into the larger default height that will become the default size in a future version. @default false

Examples

Default

const Default = ( props ) => {
	const [ value, setValue ] = useState( props.options[ 0 ] );

	const onChange: React.ComponentProps<
		typeof CustomSelectControl
	>[ 'onChange' ] = ( changeObject ) => {
		setValue( changeObject.selectedItem );
		props.onChange?.( changeObject );
	};

	return (
		<CustomSelectControl
			__next40pxDefaultSize
			{ ...props }
			onChange={ onChange }
			value={ value }
		/>
	);
};

With Long Labels

const WithLongLabels = ( props ) => {
	const [ value, setValue ] = useState( props.options[ 0 ] );

	const onChange: React.ComponentProps<
		typeof CustomSelectControl
	>[ 'onChange' ] = ( changeObject ) => {
		setValue( changeObject.selectedItem );
		props.onChange?.( changeObject );
	};

	return (
		<CustomSelectControl
			__next40pxDefaultSize
			{ ...props }
			onChange={ onChange }
			value={ value }
		/>
	);
};

With Hints

const WithHints = ( props ) => {
	const [ value, setValue ] = useState( props.options[ 0 ] );

	const onChange: React.ComponentProps<
		typeof CustomSelectControl
	>[ 'onChange' ] = ( changeObject ) => {
		setValue( changeObject.selectedItem );
		props.onChange?.( changeObject );
	};

	return (
		<CustomSelectControl
			__next40pxDefaultSize
			{ ...props }
			onChange={ onChange }
			value={ value }
		/>
	);
};