Skip to content
Appearance
Accent and overlay
Color mode

Select

A trigger and popup list for choosing an option.

Upstream documentation

Examples

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Select
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/select.json'

Usage

A complete example using the installed component and hook paths.

Select usage
"use client";import { useId } from "react";import { Label } from "@/components/ui/label";import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";function SelectPreview() {  const id = useId();  return (    <div className="w-full max-w-64 space-y-2">      <Label id={id}>Theme preference</Label>      <Select defaultValue="system">        <SelectTrigger className="w-full" aria-labelledby={id}>          <SelectValue />        </SelectTrigger>        <SelectContent>          <SelectItem value="system">System</SelectItem>          <SelectItem value="light">Light</SelectItem>          <SelectItem value="dark">Dark</SelectItem>        </SelectContent>      </Select>    </div>  );}export default function Demo() {  return <SelectPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Select

Select props
SelectPrimitive.Root.Props<Value, Multiple> & { sound?: boolean }
sound
true

SelectContent

SelectContent props
SelectPrimitive.Popup.Props &  Pick<    SelectPrimitive.Positioner.Props,    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"  >
side
"bottom"
sideOffset
4
align
"center"
alignOffset
0
alignItemWithTrigger
true

SelectGroup

SelectGroup props
SelectPrimitive.Group.Props

SelectItem

SelectItem props
SelectPrimitive.Item.Props

SelectLabel

SelectLabel props
SelectPrimitive.GroupLabel.Props

SelectScrollDownButton

SelectScrollDownButton props
React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>

SelectScrollUpButton

SelectScrollUpButton props
React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>

SelectSeparator

SelectSeparator props
SelectPrimitive.Separator.Props

SelectTrigger

SelectTrigger props
SelectPrimitive.Trigger.Props & {  size?: "sm" | "default";} & { sound?: boolean }
size
"default"
sound
true

SelectValue

SelectValue props
SelectPrimitive.Value.Props

Source

Registry JSON