Customization

Select components allow many customizations to adapt to various use cases.

For the complete list of customizations, use your IDE's autocomplete functionality. Look for props starting with custom.

Most common customizations are listed below.

Custom dropdown arrow

Applies to all select components

const CustomDropdownIndicator = (props) => {
	return (
		<RSDropdownIndicator {...props}>
			<div className='[&>svg]:es-uic-text-red-500'>
				{props.selectProps.menuIsOpen ? icons.arrowUpCircleAlt : icons.arrowDownCircleAlt}
			</div>
		</RSDropdownIndicator>
	);
};

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	customDropdownArrow={CustomDropdownIndicator}
/>;

Custom menu option

Applies to all select components

const CustomMenuOption = (props) => (
	<RSOption {...props}>
		<>
			<span role='img'>{icons.emptyCircle}</span>
			<span>{props.label}</span>
		</>
	</RSOption>
);

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	customMenuOption={CustomMenuOption}
/>;

Custom clear indicator

Applies to all select components

const CustomClearIndicator = (props) => {
	return <RSClearIndicator {...props}>{icons.errorCircleFill}</RSClearIndicator>;
};

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	clearable
	customClearIndicator={CustomClearIndicator}
/>;

Custom value display (single select)

Applies to Select and AsyncSelect

const CustomValueDisplay = (props) => {
	return (
		<RSSingleValue {...props}>
			<span className='es-uic-text-red-500 es-uic-font-mono es-uic-font-semibold'>{props.children}</span>
		</RSSingleValue>
	);
};

<Select
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	customValueDisplay={CustomValueDisplay}
/>;

Custom value display (multi-select)

Applies to MultiSelect and AsyncMultiSelect

const CustomMultiValueDisplay = (props) => {
	const colors = [
		'es-uic-bg-red-500',
		'es-uic-bg-blue-500',
		'es-uic-bg-green-500',
		'es-uic-bg-yellow-500',
		'es-uic-bg-slate-900',
	];
	const colorIndex = props.options.findIndex((option) => option.value === props.data.value) % colors.length;

	return (
		<RSMultiValue {...props}>
			<span
				className={`${colors[colorIndex]} es-uic-rounded es-uic-p-1 es-uic-font-medium es-uic-leading-none es-uic-text-white`}
			>
				{props.children}
			</span>
		</RSMultiValue>
	);
};

<MultiSelect
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	customValueDisplay={CustomMultiValueDisplay}
/>;

Custom item remove

Applies to MultiSelect and AsyncMultiSelect

const CustomMultiValueRemoveButton = (props) => {
	return <RSMultiValueRemove {...props}>{icons.remove}</RSMultiValueRemove>;
};

<MultiSelect
	value={value}
	onChange={(value) => setValue(value)}
	options={[
		{ value: 'option-1', label: 'Option 1' },
		{ value: 'option-2', label: 'Option 2' },
		{ value: 'option-3', label: 'Option 3' },
	]}
	customValueRemove={CustomMultiValueRemoveButton}
/>;