Components

Select

Displays a list of options for the user to pick from, triggered by a button. Use it when a user must choose one value from a set.

example.tsx

Import

tsx

import {
  AppSelect,
  AppSelectTrigger,
  AppSelectValue,
  AppSelectContent,
  AppSelectItem,
  AppSelectLabel,
} from "@/components/primitives/AppSelect"

Controlled

Use value and onValueChange to control the selected value from outside the component.

tsx

const [fruit, setFruit] = useState("")

<AppSelect value={fruit} onValueChange={setFruit}>
  <AppSelectTrigger>
    <AppSelectValue placeholder="Pick a fruit" />
  </AppSelectTrigger>
  <AppSelectContent>
    <AppSelectItem value="apple">Apple</AppSelectItem>
    <AppSelectItem value="banana">Banana</AppSelectItem>
  </AppSelectContent>
</AppSelect>

Disabled

Pass disabled on AppSelect to disable the whole control, or on a specific AppSelectItem to disable individual options.

tsx

{/* Disable the entire select */}
<AppSelect disabled>...</AppSelect>

{/* Disable a single option */}
<AppSelectItem value="mango" disabled>Mango (out of stock)</AppSelectItem>

API Reference

AppSelect and its sub-components extend their underlying Radix UI primitives.

Prop	Type	Default	Description
value	string	—	Controlled value of the selected item.
defaultValue	string	—	Initial selected value when uncontrolled.
onValueChange	(value: string) => void	—	Callback fired when the selected value changes.
disabled	boolean	false	Disables the entire select control.
placeholder	string	—	Placeholder text shown in AppSelectValue when no item is selected.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppSelect.tsx

"use client"

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

function AppSelect(props: React.ComponentProps<typeof Select>) {
  return <Select {...props} />
}

function AppSelectTrigger(props: React.ComponentPropsWithoutRef<typeof SelectTrigger>) {
  return <SelectTrigger {...props} />
}

function AppSelectValue(props: React.ComponentPropsWithoutRef<typeof SelectValue>) {
  return <SelectValue {...props} />
}

function AppSelectContent(props: React.ComponentPropsWithoutRef<typeof SelectContent>) {
  return <SelectContent {...props} />
}

function AppSelectItem(props: React.ComponentPropsWithoutRef<typeof SelectItem>) {
  return <SelectItem {...props} />
}

function AppSelectLabel(props: React.ComponentPropsWithoutRef<typeof SelectLabel>) {
  return <SelectLabel {...props} />
}

export { AppSelect, AppSelectTrigger, AppSelectValue, AppSelectContent, AppSelectItem, AppSelectLabel }