Select
Displays a list of options for the user to pick from—triggered by a button.
import { Label } from "@ngrok/mantle/label";
import { Select } from "@ngrok/mantle/select";
<Label className="w-full max-w-64" htmlFor="fruits">
<p>Fruits</p>
<Select.Root id="fruits" name="number">
<Select.Trigger>
<Select.Value placeholder="Select a fruit" />
</Select.Trigger>
<Select.Content width="trigger">
<Select.Group>
<Select.Label>Fruits</Select.Label>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
<Select.Item value="blueberry">Blueberry</Select.Item>
<Select.Item value="grapes">Grapes</Select.Item>
<Select.Item value="pineapple">Pineapple</Select.Item>
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.Label>Vegetables</Select.Label>
<Select.Item value="carrot">Carrot</Select.Item>
<Select.Item value="cucumber">Cucumber</Select.Item>
<Select.Item value="lettuce">Lettuce</Select.Item>
<Select.Item value="tomato">Tomato</Select.Item>
<Select.Item value="zucchini">
<p>Zucchini</p>
<p>Ex sit voluptate incididunt pariatur velit consequat reprehenderit.</p>
</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
</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 } from "@ngrok/mantle/select";
<Select.Root value={value} onValueChange={setValue}>
<Select.Trigger className="w-[180px]">
<Select.Value placeholder="Select a fruit">
{value === "apple" ? <>🍎 Apple!</> : <>🍑 Peach!</>}
</Select.Value>
</Select.Trigger>
<Select.Content width="trigger">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="peach">Peach</Select.Item>
</Select.Content>
</Select.Root>
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:
Select.Trigger
The button that toggles the Select
. The Select.Content
will position itself adjacent to the trigger.
All props from Radix Select.Trigger, plus:
Select.Value
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.
Select.Content
The component that pops out when the Select
is open as a portal adjacent to the Select.Trigger
button. It contains a scrolling viewport of the select items.
All props from Radix Select.Content, plus:
Select.Group
A group of related options within a select menu. Similar to an html optgroup
element. Use in conjunction with Select.Label
to ensure good accessibility via automatic labelling.
Radix Select.Group props.
Select.Separator
Used to visually separate items in the select. Composed from Mantle Separator.
Select.Item
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.
Select.Label
Used to render the label of a group. It won't be focusable using arrow keys. Use in conjunction with Select.Group
to ensure good accessibility via automatic labelling of a group.
Radix Select.Label props.