reacord/packages/website/src/content/guides/5-select-menu.md

title, description, slug

title	description	slug
Select Menus	Using select menu components	select-menus

Select Menus

To create a select menu, use the Select component, and pass a list of Option components as children. Use the value prop to set a currently selected value. You can respond to changes in the value via onChangeValue.

export function FruitSelect({ onConfirm }) {
	const [value, setValue] = useState()

	return (
		<>
			<Select
				placeholder="choose a fruit"
				value={value}
				onChangeValue={setValue}
			>
				<Option value="🍎" />
				<Option value="🍌" />
				<Option value="🍒" />
			</Select>
			<Button
				label="confirm"
				disabled={value == undefined}
				onClick={() => {
					if (value) onConfirm(value)
				}}
			/>
		</>
	)
}

const instance = reacord.createChannelMessage(channel).render(
	<FruitSelect
		onConfirm={(value) => {
			instance.render(`you chose ${value}`)
			instance.deactivate()
		}}
	/>,
)

For a multi-select, use the multiple prop, then you can use values and onChangeMultiple to handle multiple values.

export function FruitSelect({ onConfirm }) {
	const [values, setValues] = useState([])

	return (
		<Select
			placeholder="choose a fruit"
			values={values}
			onChangeMultiple={setValues}
		>
			<Option value="🍎" />
			<Option value="🍌" />
			<Option value="🍒" />
		</Select>
	)
}

The Select component accepts a variety of props beyond what's shown here. See the API reference for more information.