0.4.0

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

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

API Reference

The Select components are built on top of Radix Select.

Select

All props from Radix Select.Root, plus:

PropTypeDefaultDescription

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:

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

Radix Select.Value props.

SelectContent

All props from Radix Select.Content, plus:

PropTypeDefaultDescription

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.