Select

Optimize user choices with Bramble UI's select component. Create intuitive and efficient web interfaces with modern select dropdowns.

Usage

import {Select} from '@/ui'
                    
const [fruit, setFruit] = useState('')

const handleChange = (e: React.FormEvent<HTMLSelectElement>): void => {
	setFruit(e.currentTarget.value)
}

const data = [
    { name: 'apples', emoji: '🍏' },
    { name: 'bananas', emoji: '🍌' },
    { name: 'grapes', emoji: '🍇' },
    { name: 'lemons', emoji: '🍋' },
]
    
return (			
	<Select
		onChange={handleChange}
		value={fruit}
		label='Fruit'
	>
		<option
			value=''
			disabled
			hidden
		>
			Select
		</option>
		{data.map((el, index) => (
			<option
				key={index}
				value={el.name}
			>
				{el.name}
			</option>
		))}
	</Select>

)

Sizes

Add TailwindCSS font-size utility class to className attribute.

Emojis

Emojis can be used in option element. Add nocaret={true}.

<Select
	className='dark circle'
	onChange={handleChange}
	value={fruit}
	nocaret={true}
>
	<option
		value=''
		disabled
		hidden
	>
		➕
	</option>
	{data.map((el, index) => (
		<option
			key={index}
			value={el.name}
		>
			{el.emoji}
		</option>
	))}
</Select>

// with emoji and text 
<Select
	className='dark rounded-lg text-3xl'
	onChange={handleChange}
	value={fruit}
	nocaret={true}
>
	<option
		value=''
		disabled
		hidden
	>
		➕ Select
	</option>
	{data.map((el, index) => (
		<option
			key={index}
			value={el.name}
		>
			{el.emoji} {el.name}
		</option>
	))}
</Select>

Labels

Add labelStyles='row' for inline display.

<Select
	className='dark'
	onChange={handleChange}
	value={fruit}
	label='Select Fruit'
	labelStyles='row' // add this
>
	<option
		value=''
		disabled
		hidden
	>
		Select
	</option>
	{data.map((el, index) => (
		<option
			key={index}
			value={el.name}
		>
			{el.name}
		</option>
	))}
</Select>

Numbers

<Select
	className='lg dark'
	label='Select Page'
	labelStyles='row'
	onChange={handleChange}
>
	{[...new Array(24)].map((_el, index) => (
		<option
			key={index}
			value={(index + 1).toString()}
		>
			{index + 1}
		</option>
	))}
</Select>

Optgroup

const drinks = [
		{ name: 'beer', emoji: '🍺', alcoholic: true },
		{ name: 'milk', emoji: '🥛', alcoholic: false },
		{ name: 'wine', emoji: '🍷', alcoholic: true },
		{ name: 'pop', emoji: '🥤', alcoholic: false },
		{ name: 'tea', emoji: '☕', alcoholic: false },
		{ name: 'whiskey', emoji: '🥃', alcoholic: true },
]

<Select
	className='dark text-size-inherit'
	onChange={handleDrinksChange}
	value={drink}
	nocaret={true}
>
	<option
		value=''
		disabled
		hidden
	>
		➕ Select
	</option>
	<optgroup label='Non-Alchoholic'>
		{drinks.map(
			(el, index) =>
				!el.alcoholic && (
					<option
						key={index}
						value={el.name}
					>
						{el.emoji} {el.name}
					</option>
				)
		)}
	</optgroup>
	<optgroup label='Alchoholic'>
		{drinks.map(
			(el, index) =>
				el.alcoholic && (
					<option
						key={index}
						value={el.name}
					>
						{el.emoji} {el.name}
					</option>
				)
		)}
	</optgroup>
</Select>

Disabled

<Select disabled={true}

Required

An asterisk (*) indicates a required field

<Select required={true} ...

RTL