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

<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={icons.arrowDownCircle}
/>

Custom menu option

Applies to all select components

<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={(item) => <span className='es:font-bold es:text-blue-400'>{item?.label}</span>}
/>

Custom value display (single select)

Applies to Select and AsyncSelect

<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={(item) => <span className='es:font-bold es:text-blue-400'>{item?.label}</span>}
/>

Custom value display (multi-select)

Applies to MultiSelect and AsyncMultiSelect

Only applies to cases where 1 item is selected.

<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={(item) => (
		<HStack
			className='es:icon:size-[1em] es:font-bold es:text-blue-400'
			slot='label'
		>
			{item?.icon}
			{item?.label}
		</HStack>
	)}
/>