Select

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

Fruits

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


	Fruits
	
		
			
		
		
			
				Fruits
				Apple
				Banana
				Blueberry
				Grapes
				Pineapple
			
			
			
				Vegetables
				Carrot
				Cucumber
				Lettuce
				Tomato
				
					Zucchini
					Ex sit voluptate incididunt pariatur velit consequat reprehenderit.

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";


	
		
			{value === "apple" ? <>🍎 Apple! : <>🍑 Peach!}
		
	
	
		Apple
		Peach

API Reference

The Select components are built on top of Radix Select.

Select

All props from Radix Select.Root, plus:

Prop Type Default Description

Prop	Type	Default	Description
onChange	`(value: string) => void`	—	Event handler called when the value changes. Use it instead of `onValueChange`.
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`.

onChange

(value: string) => void

—

Event handler called when the value changes. Use it instead of onValueChange.

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

All props from Radix Select.Trigger, plus:

Prop Type Default Description

Prop	Type	Default	Description
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`.

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

Radix Select.Value props.

SelectContent

All props from Radix Select.Content, plus:

Prop Type Default Description

Prop	Type	Default	Description
width	trigger content	—	`trigger` will ensure the content is the same width as the trigger button. `content` will make it the size of the content itself.

width

trigger
content

—

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

content will make it the size of the content itself.

SelectGroup

Radix Select.Group props.

SelectSeparator

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

SelectItem

Radix Select.Item props.

SelectLabel

Radix Select.Label props.

SelectScrollUpButton

Radix Select.ScrollUpButton props.

SelectScrollDownButton

Radix Select.ScrollDownButton props.