Select | Cortexcn

Installation

pnpm dlx shadcn@latest add @cortexcn/select

pnpm dlx shadcn@latest add @cortexcn/select

Usage

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "@/components/select";

Examples

Basic

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectBasic() {
  return (
    <div className="flex flex-col gap-6">
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes" disabled>
              Grapes
            </SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectBasic() {  return (    <div className="flex flex-col gap-6">      <Select>        <SelectTrigger>          <SelectValue placeholder="Select a fruit" />        </SelectTrigger>        <SelectContent>          <SelectGroup>            <SelectItem value="apple">Apple</SelectItem>            <SelectItem value="banana">Banana</SelectItem>            <SelectItem value="blueberry">Blueberry</SelectItem>            <SelectItem value="grapes" disabled>              Grapes            </SelectItem>            <SelectItem value="pineapple">Pineapple</SelectItem>          </SelectGroup>        </SelectContent>      </Select>    </div>  )}

With icons

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"
import { ChartBarIcon, ChartLineIcon, ChartPieIcon } from "lucide-react"

export function SelectWithIcons() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Select>
          <SelectTrigger size="sm">
            <SelectValue
              placeholder={
                <>
                  <ChartLineIcon />
                  Chart Type
                </>
              }
            />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="line">
                <ChartLineIcon />
                Line
              </SelectItem>
              <SelectItem value="bar">
                <ChartBarIcon />
                Bar
              </SelectItem>
              <SelectItem value="pie">
                <ChartPieIcon />
                Pie
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Select>
          <SelectTrigger size="default">
            <SelectValue
              placeholder={
                <>
                  <ChartLineIcon />
                  Chart Type
                </>
              }
            />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="line">
                <ChartLineIcon />
                Line
              </SelectItem>
              <SelectItem value="bar">
                <ChartBarIcon />
                Bar
              </SelectItem>
              <SelectItem value="pie">
                <ChartPieIcon />
                Pie
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"import { ChartBarIcon, ChartLineIcon, ChartPieIcon } from "lucide-react"export function SelectWithIcons() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Select>          <SelectTrigger size="sm">            <SelectValue              placeholder={                <>                  <ChartLineIcon />                  Chart Type                </>              }            />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="line">                <ChartLineIcon />                Line              </SelectItem>              <SelectItem value="bar">                <ChartBarIcon />                Bar              </SelectItem>              <SelectItem value="pie">                <ChartPieIcon />                Pie              </SelectItem>            </SelectGroup>          </SelectContent>        </Select>        <Select>          <SelectTrigger size="default">            <SelectValue              placeholder={                <>                  <ChartLineIcon />                  Chart Type                </>              }            />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="line">                <ChartLineIcon />                Line              </SelectItem>              <SelectItem value="bar">                <ChartBarIcon />                Bar              </SelectItem>              <SelectItem value="pie">                <ChartPieIcon />                Pie              </SelectItem>            </SelectGroup>          </SelectContent>        </Select>      </div>    </div>  )}

With groups and labels

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/select"

export function SelectWithGroups() {
  return (
    <div className="flex flex-col gap-6">
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Vegetables</SelectLabel>
            <SelectItem value="carrot">Carrot</SelectItem>
            <SelectItem value="broccoli">Broccoli</SelectItem>
            <SelectItem value="spinach">Spinach</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "@/components/select"export function SelectWithGroups() {  return (    <div className="flex flex-col gap-6">      <Select>        <SelectTrigger>          <SelectValue placeholder="Select a fruit" />        </SelectTrigger>        <SelectContent>          <SelectGroup>            <SelectLabel>Fruits</SelectLabel>            <SelectItem value="apple">Apple</SelectItem>            <SelectItem value="banana">Banana</SelectItem>            <SelectItem value="blueberry">Blueberry</SelectItem>          </SelectGroup>          <SelectSeparator />          <SelectGroup>            <SelectLabel>Vegetables</SelectLabel>            <SelectItem value="carrot">Carrot</SelectItem>            <SelectItem value="broccoli">Broccoli</SelectItem>            <SelectItem value="spinach">Spinach</SelectItem>          </SelectGroup>        </SelectContent>      </Select>    </div>  )}

Large list

import { Item } from "@/components/item"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectLargeList() {
  return (
    <div className="flex flex-col gap-6">
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select an item" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {Array.from({ length: 100 }).map((_, i) => (
              <SelectItem key={i} value={`item-${i}`}>
                Item {i}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Item } from "@/components/item"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectLargeList() {  return (    <div className="flex flex-col gap-6">      <Select>        <SelectTrigger>          <SelectValue placeholder="Select an item" />        </SelectTrigger>        <SelectContent>          <SelectGroup>            {Array.from({ length: 100 }).map((_, i) => (              <SelectItem key={i} value={`item-${i}`}>                Item {i}              </SelectItem>            ))}          </SelectGroup>        </SelectContent>      </Select>    </div>  )}

Sizes

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectSizes() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Select>
          <SelectTrigger size="sm">
            <SelectValue placeholder="Small size" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
              <SelectItem value="blueberry">Blueberry</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Select>
          <SelectTrigger size="default">
            <SelectValue placeholder="Default size" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
              <SelectItem value="blueberry">Blueberry</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectSizes() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Select>          <SelectTrigger size="sm">            <SelectValue placeholder="Small size" />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="apple">Apple</SelectItem>              <SelectItem value="banana">Banana</SelectItem>              <SelectItem value="blueberry">Blueberry</SelectItem>            </SelectGroup>          </SelectContent>        </Select>        <Select>          <SelectTrigger size="default">            <SelectValue placeholder="Default size" />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="apple">Apple</SelectItem>              <SelectItem value="banana">Banana</SelectItem>              <SelectItem value="blueberry">Blueberry</SelectItem>            </SelectGroup>          </SelectContent>        </Select>      </div>    </div>  )}

Subscription plan

import * as React from "react"
import { Item, ItemContent, ItemDescription, ItemTitle } from "@/components/item"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

const plans = [
  {
    name: "Starter",
    description: "Perfect for individuals getting started.",
  },
  {
    name: "Professional",
    description: "Ideal for growing teams and businesses.",
  },
  {
    name: "Enterprise",
    description: "Advanced features for large organizations.",
  },
]

function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
  return (
    <Item size="xs" className="w-full p-0">
      <ItemContent className="gap-0 normal-case">
        <ItemTitle className="font-sans">{plan.name}</ItemTitle>
        <ItemDescription className="text-xs font-normal tracking-normal">
          {plan.description}
        </ItemDescription>
      </ItemContent>
    </Item>
  )
}

export function SelectPlan() {
  const [plan, setPlan] = React.useState<string>(plans[0]?.name ?? "")

  const selectedPlan = plans.find((p) => p.name === plan)

  return (
    <div className="flex flex-col gap-6">
      <Select value={plan} onValueChange={setPlan}>
        <SelectTrigger className="h-auto! w-72">
          <SelectValue>
            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {plans.map((plan) => (
              <SelectItem key={plan.name} value={plan.name}>
                <SelectPlanItem plan={plan} />
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

import * as React from "react"import { Item, ItemContent, ItemDescription, ItemTitle } from "@/components/item"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"const plans = [  {    name: "Starter",    description: "Perfect for individuals getting started.",  },  {    name: "Professional",    description: "Ideal for growing teams and businesses.",  },  {    name: "Enterprise",    description: "Advanced features for large organizations.",  },]function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {  return (    <Item size="xs" className="w-full p-0">      <ItemContent className="gap-0 normal-case">        <ItemTitle className="font-sans">{plan.name}</ItemTitle>        <ItemDescription className="text-xs font-normal tracking-normal">          {plan.description}        </ItemDescription>      </ItemContent>    </Item>  )}export function SelectPlan() {  const [plan, setPlan] = React.useState<string>(plans[0]?.name ?? "")  const selectedPlan = plans.find((p) => p.name === plan)  return (    <div className="flex flex-col gap-6">      <Select value={plan} onValueChange={setPlan}>        <SelectTrigger className="h-auto! w-72">          <SelectValue>            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}          </SelectValue>        </SelectTrigger>        <SelectContent>          <SelectGroup>            {plans.map((plan) => (              <SelectItem key={plan.name} value={plan.name}>                <SelectPlanItem plan={plan} />              </SelectItem>            ))}          </SelectGroup>        </SelectContent>      </Select>    </div>  )}

With button

import { Button } from "@/components/button"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectWithButton() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <div className="flex items-center gap-2">
          <Select>
            <SelectTrigger size="sm">
              <SelectValue placeholder="Small" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple">Apple</SelectItem>
                <SelectItem value="banana">Banana</SelectItem>
                <SelectItem value="blueberry">Blueberry</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <Button variant="outline" size="sm">
            Submit
          </Button>
        </div>
        <div className="flex items-center gap-2">
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Default" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple">Apple</SelectItem>
                <SelectItem value="banana">Banana</SelectItem>
                <SelectItem value="blueberry">Blueberry</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <Button variant="outline">Submit</Button>
        </div>
      </div>
    </div>
  )
}

import { Button } from "@/components/button"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectWithButton() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <div className="flex items-center gap-2">          <Select>            <SelectTrigger size="sm">              <SelectValue placeholder="Small" />            </SelectTrigger>            <SelectContent>              <SelectGroup>                <SelectItem value="apple">Apple</SelectItem>                <SelectItem value="banana">Banana</SelectItem>                <SelectItem value="blueberry">Blueberry</SelectItem>              </SelectGroup>            </SelectContent>          </Select>          <Button variant="outline" size="sm">            Submit          </Button>        </div>        <div className="flex items-center gap-2">          <Select>            <SelectTrigger>              <SelectValue placeholder="Default" />            </SelectTrigger>            <SelectContent>              <SelectGroup>                <SelectItem value="apple">Apple</SelectItem>                <SelectItem value="banana">Banana</SelectItem>                <SelectItem value="blueberry">Blueberry</SelectItem>              </SelectGroup>            </SelectContent>          </Select>          <Button variant="outline">Submit</Button>        </div>      </div>    </div>  )}

Popper

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectItemAligned() {
  return (
    <div className="flex flex-col gap-6">
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent position="popper">
          <SelectGroup>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes" disabled>
              Grapes
            </SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectItemAligned() {  return (    <div className="flex flex-col gap-6">      <Select>        <SelectTrigger>          <SelectValue placeholder="Select a fruit" />        </SelectTrigger>        <SelectContent position="popper">          <SelectGroup>            <SelectItem value="apple">Apple</SelectItem>            <SelectItem value="banana">Banana</SelectItem>            <SelectItem value="blueberry">Blueberry</SelectItem>            <SelectItem value="grapes" disabled>              Grapes            </SelectItem>            <SelectItem value="pineapple">Pineapple</SelectItem>          </SelectGroup>        </SelectContent>      </Select>    </div>  )}

With field

import { Field, FieldDescription, FieldLabel } from "@/components/field"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectWithField() {
  return (
    <div className="flex flex-col gap-6">
      <Field>
        <FieldLabel htmlFor="select-fruit">Favorite Fruit</FieldLabel>
        <Select>
          <SelectTrigger id="select-fruit">
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
              <SelectItem value="blueberry">Blueberry</SelectItem>
              <SelectItem value="grapes">Grapes</SelectItem>
              <SelectItem value="pineapple">Pineapple</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <FieldDescription>
          Choose your favorite fruit from the list.
        </FieldDescription>
      </Field>
    </div>
  )
}

import { Field, FieldDescription, FieldLabel } from "@/components/field"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectWithField() {  return (    <div className="flex flex-col gap-6">      <Field>        <FieldLabel htmlFor="select-fruit">Favorite Fruit</FieldLabel>        <Select>          <SelectTrigger id="select-fruit">            <SelectValue placeholder="Select a fruit" />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="apple">Apple</SelectItem>              <SelectItem value="banana">Banana</SelectItem>              <SelectItem value="blueberry">Blueberry</SelectItem>              <SelectItem value="grapes">Grapes</SelectItem>              <SelectItem value="pineapple">Pineapple</SelectItem>            </SelectGroup>          </SelectContent>        </Select>        <FieldDescription>          Choose your favorite fruit from the list.        </FieldDescription>      </Field>    </div>  )}

Invalid

import { Field, FieldError, FieldLabel } from "@/components/field"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectInvalid() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex flex-col gap-4">
        <Select>
          <SelectTrigger aria-invalid="true">
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="apple">Apple</SelectItem>
              <SelectItem value="banana">Banana</SelectItem>
              <SelectItem value="blueberry">Blueberry</SelectItem>
              <SelectItem value="grapes">Grapes</SelectItem>
              <SelectItem value="pineapple">Pineapple</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Field data-invalid>
          <FieldLabel htmlFor="select-fruit-invalid">Favorite Fruit</FieldLabel>
          <Select>
            <SelectTrigger id="select-fruit-invalid" aria-invalid>
              <SelectValue placeholder="Select a fruit" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple">Apple</SelectItem>
                <SelectItem value="banana">Banana</SelectItem>
                <SelectItem value="blueberry">Blueberry</SelectItem>
                <SelectItem value="grapes">Grapes</SelectItem>
                <SelectItem value="pineapple">Pineapple</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
          <FieldError errors={[{ message: "Please select a valid fruit." }]} />
        </Field>
      </div>
    </div>
  )
}

import { Field, FieldError, FieldLabel } from "@/components/field"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectInvalid() {  return (    <div className="flex flex-col gap-6">      <div className="flex flex-col gap-4">        <Select>          <SelectTrigger aria-invalid="true">            <SelectValue placeholder="Select a fruit" />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="apple">Apple</SelectItem>              <SelectItem value="banana">Banana</SelectItem>              <SelectItem value="blueberry">Blueberry</SelectItem>              <SelectItem value="grapes">Grapes</SelectItem>              <SelectItem value="pineapple">Pineapple</SelectItem>            </SelectGroup>          </SelectContent>        </Select>        <Field data-invalid>          <FieldLabel htmlFor="select-fruit-invalid">Favorite Fruit</FieldLabel>          <Select>            <SelectTrigger id="select-fruit-invalid" aria-invalid>              <SelectValue placeholder="Select a fruit" />            </SelectTrigger>            <SelectContent>              <SelectGroup>                <SelectItem value="apple">Apple</SelectItem>                <SelectItem value="banana">Banana</SelectItem>                <SelectItem value="blueberry">Blueberry</SelectItem>                <SelectItem value="grapes">Grapes</SelectItem>                <SelectItem value="pineapple">Pineapple</SelectItem>              </SelectGroup>            </SelectContent>          </Select>          <FieldError errors={[{ message: "Please select a valid fruit." }]} />        </Field>      </div>    </div>  )}

Inline with input and NativeSelect

import { Input } from "@/components/input"
import { NativeSelect, NativeSelectOption } from "@/components/native-select"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectInline() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-2">
        <Input placeholder="Search..." className="flex-1" />
        <Select>
          <SelectTrigger className="w-[140px]">
            <SelectValue placeholder="Filter" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="active">Active</SelectItem>
              <SelectItem value="inactive">Inactive</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <NativeSelect className="w-[140px]">
          <NativeSelectOption value="">Sort by</NativeSelectOption>
          <NativeSelectOption value="name">Name</NativeSelectOption>
          <NativeSelectOption value="date">Date</NativeSelectOption>
          <NativeSelectOption value="status">Status</NativeSelectOption>
        </NativeSelect>
      </div>
    </div>
  )
}

import { Input } from "@/components/input"import { NativeSelect, NativeSelectOption } from "@/components/native-select"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectInline() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center gap-2">        <Input placeholder="Search..." className="flex-1" />        <Select>          <SelectTrigger className="w-[140px]">            <SelectValue placeholder="Filter" />          </SelectTrigger>          <SelectContent>            <SelectGroup>              <SelectItem value="all">All</SelectItem>              <SelectItem value="active">Active</SelectItem>              <SelectItem value="inactive">Inactive</SelectItem>            </SelectGroup>          </SelectContent>        </Select>        <NativeSelect className="w-[140px]">          <NativeSelectOption value="">Sort by</NativeSelectOption>          <NativeSelectOption value="name">Name</NativeSelectOption>          <NativeSelectOption value="date">Date</NativeSelectOption>          <NativeSelectOption value="status">Status</NativeSelectOption>        </NativeSelect>      </div>    </div>  )}

Disabled

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectDisabled() {
  return (
    <div className="flex flex-col gap-6">
      <Select disabled>
        <SelectTrigger>
          <SelectValue placeholder="Disabled" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes" disabled>
              Grapes
            </SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectDisabled() {  return (    <div className="flex flex-col gap-6">      <Select disabled>        <SelectTrigger>          <SelectValue placeholder="Disabled" />        </SelectTrigger>        <SelectContent>          <SelectGroup>            <SelectItem value="apple">Apple</SelectItem>            <SelectItem value="banana">Banana</SelectItem>            <SelectItem value="blueberry">Blueberry</SelectItem>            <SelectItem value="grapes" disabled>              Grapes            </SelectItem>            <SelectItem value="pineapple">Pineapple</SelectItem>          </SelectGroup>        </SelectContent>      </Select>    </div>  )}

In dialog

import { Button } from "@/components/button"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/dialog"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"

export function SelectInDialog() {
  return (
    <div className="flex flex-col gap-6">
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Select Example</DialogTitle>
            <DialogDescription>
              Use the select below to choose a fruit.
            </DialogDescription>
          </DialogHeader>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Select a fruit" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple">Apple</SelectItem>
                <SelectItem value="banana">Banana</SelectItem>
                <SelectItem value="blueberry">Blueberry</SelectItem>
                <SelectItem value="grapes">Grapes</SelectItem>
                <SelectItem value="pineapple">Pineapple</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </DialogContent>
      </Dialog>
    </div>
  )
}

import { Button } from "@/components/button"import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/dialog"import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/select"export function SelectInDialog() {  return (    <div className="flex flex-col gap-6">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">Open Dialog</Button>        </DialogTrigger>        <DialogContent>          <DialogHeader>            <DialogTitle>Select Example</DialogTitle>            <DialogDescription>              Use the select below to choose a fruit.            </DialogDescription>          </DialogHeader>          <Select>            <SelectTrigger>              <SelectValue placeholder="Select a fruit" />            </SelectTrigger>            <SelectContent>              <SelectGroup>                <SelectItem value="apple">Apple</SelectItem>                <SelectItem value="banana">Banana</SelectItem>                <SelectItem value="blueberry">Blueberry</SelectItem>                <SelectItem value="grapes">Grapes</SelectItem>                <SelectItem value="pineapple">Pineapple</SelectItem>              </SelectGroup>            </SelectContent>          </Select>        </DialogContent>      </Dialog>    </div>  )}

Adapted from the shadcn/ui Select (MIT).