Select

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/select

Brings in: utils · npm: lucide-react@^1.67.0, radix-ui@^1.8.1

Usage

"use client"

import * as React from "react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function Example() {
  // Nothing is chosen until the person chooses.
  const [environment, setEnvironment] = React.useState("")
  return (
    <div className="flex flex-col gap-1.5">
      <span id="example-env" className="text-sm font-medium">
        Run against
      </span>
      <Select value={environment} onValueChange={setEnvironment}>
        <SelectTrigger aria-labelledby="example-env" className="w-56">
          <SelectValue placeholder="Choose an environment" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="staging">Staging</SelectItem>
          <SelectItem value="qa">QA</SelectItem>
          <SelectItem value="production">Production</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

<Select>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Root>.

<SelectContent>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Content>.

<SelectGroup>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Group>.

<SelectItem>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Item>.

<SelectLabel>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Label>.

<SelectScrollDownButton>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>.

<SelectScrollUpButton>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>.

<SelectSeparator>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Separator>.

<SelectTrigger>

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Trigger>.

<SelectValue>

No props.

Also takes the props of React.ComponentProps<typeof SelectPrimitive.Value>.