0.27.1
Theme Switcher

Select

Displays a list of options for the user to pick from—triggered by a button.

import { Label } from "@ngrok/mantle/label";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectLabel,
	SelectSeparator,
	SelectTrigger,
	SelectValue,
} from "@ngrok/mantle/select";

<Label className="w-full max-w-64" htmlFor="fruits">
	<p>Fruits</p>
	<Select id="fruits" name="number">
		<SelectTrigger>
			<SelectValue placeholder="Select a fruit" />
		</SelectTrigger>
		<SelectContent width="trigger">
			<SelectGroup>
				<SelectLabel>Fruits</SelectLabel>
				<SelectItem value="apple">Apple</SelectItem>
				<SelectItem value="banana">Banana</SelectItem>
				<SelectItem value="blueberry">Blueberry</SelectItem>
				<SelectItem value="grapes">Grapes</SelectItem>
				<SelectItem value="pineapple">Pineapple</SelectItem>
			</SelectGroup>
			<SelectSeparator />
			<SelectGroup>
				<SelectLabel>Vegetables</SelectLabel>
				<SelectItem value="carrot">Carrot</SelectItem>
				<SelectItem value="cucumber">Cucumber</SelectItem>
				<SelectItem value="lettuce">Lettuce</SelectItem>
				<SelectItem value="tomato">Tomato</SelectItem>
				<SelectItem value="zucchini">
					<p>Zucchini</p>
					<p>Ex sit voluptate incididunt pariatur velit consequat reprehenderit.</p>
				</SelectItem>
			</SelectGroup>
		</SelectContent>
	</Select>
</Label>

Examples

Custom selected value

By default the selected item's text will be rendered when selected. Sometimes you may need to render something different. You can control the select and pass children instead.

import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@ngrok/mantle/select";

<Select value={value} onValueChange={setValue}>
	<SelectTrigger className="w-[180px]">
		<SelectValue placeholder="Select a fruit">
			{value === "apple" ? <>🍎 Apple!</> : <>🍑 Peach!</>}
		</SelectValue>
	</SelectTrigger>
	<SelectContent width="trigger">
		<SelectItem value="apple">Apple</SelectItem>
		<SelectItem value="peach">Peach</SelectItem>
	</SelectContent>
</Select>

API Reference

The Select components are built on top of Radix Select.

Select

Displays a list of options for the user to pick from—triggered by a button.

All props from Radix Select.Root, plus:

PropTypeDefaultDescription
onValueChange
(value: string) => void
—

Event handler called when the value changes.

validation
  • error
  • success
  • warning
  • false
  • () => "error" | "success" | "warning" | false
—

Use the validation prop to show if the select trigger has a specific validation status. This will change the border and outline of the select trigger.

The false type is useful when using short-circuiting logic so that you don't need to use a ternary with undefined.

Setting validation to error also sets aria-invalid.

SelectTrigger

The button that toggles the Select. The SelectContent will position itself adjacent to the trigger.

All props from Radix Select.Trigger, plus:

PropTypeDefaultDescription
validation
  • error
  • success
  • warning
  • false
  • () => "error" | "success" | "warning" | false
—

Use the validation prop to show if the select trigger has a specific validation status. This will change the border and outline of the select trigger.

The false type is useful when using short-circuiting logic so that you don't need to use a ternary with undefined.

Setting validation to error also sets aria-invalid.

SelectValue

The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the Select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the Select has no value.

Radix Select.Value props.

SelectContent

The component that pops out when the Select is open as a portal adjacent to the SelectTrigger button. It contains a scrolling viewport of the select items.

All props from Radix Select.Content, plus:

PropTypeDefaultDescription
width
  • trigger
  • content
trigger

trigger will ensure the content is the same width as the trigger button.

content will make it the instrinic size of the content itself; it will be the width of the longest/widest item.

SelectGroup

A group of related options within a select menu. Similar to an html optgroup element. Use in conjunction with SelectLabel to ensure good accessibility via automatic labelling.

Radix Select.Group props.

SelectSeparator

Used to visually separate items in the select. Composed from Mantle Separator.

SelectItem

An option within a select menu. Similar to an html option element. Has a required value prop that will be passed to the onValueChange handler of the Select component when this item is selected. Displays the children as the option's text.

Radix Select.Item props.

SelectLabel

Used to render the label of a group. It won't be focusable using arrow keys. Use in conjunction with SelectGroup to ensure good accessibility via automatic labelling of a group.

Radix Select.Label props.