Skip to Content
FrontendBundlesComponentsUI PrimitivesSelect

Select

A fully accessible dropdown select built on Radix UI Select. For async/searchable/multi selects, use Combobox.

Import

import {
  Select, SelectGroup, SelectValue, SelectTrigger, SelectContent,
  SelectLabel, SelectItem, SelectSeparator,
  SelectScrollUpButton, SelectScrollDownButton,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Select";

Usage

import {
  Select, SelectTrigger, SelectValue,
  SelectContent, SelectGroup, SelectLabel, SelectItem,
} from "...";
 
<Select value={status} onValueChange={setStatus}>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Select status..." />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Active</SelectLabel>
      <SelectItem value="draft">Draft</SelectItem>
      <SelectItem value="pending">Pending</SelectItem>
      <SelectItem value="paid">Paid</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Archived</SelectLabel>
      <SelectItem value="cancelled">Cancelled</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

For CRUD form fields with ColumnTypeEnum.SELECT, RenderFormFields uses Combobox internally (which provides search). Use this primitive Select for simple dropdowns with a static, known list.

Last updated on
LabelCheckbox