Faber UI
Components

Select

A custom dropdown select.

Select is built on the Base UI Select primitive. It renders a custom dropdown for choosing a single value from a list.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/select.json

Usage

typescript
"use client";

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

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
];

export default function Example() {
  return (
    <Select items={fruits}>
      <SelectTrigger>
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
      </SelectContent>
    </Select>
  );
}

Pass items to the root so the trigger shows the selected item's label rather than its raw value.

Examples

Default

With groups

Small

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
SelectSelect.RootBase UI—
SelectGroupdata-slot="select-group"Select.GroupBase UI—
SelectValuedata-slot="select-value"Select.ValueBase UI—
SelectTriggerdata-slot="select-trigger"Select.TriggerBase UI
  • size? = "default""sm" | "default"
SelectContentdata-slot="select-content"Select.PopupBase UI
  • align? = "center"Select.Positioner["align"]
  • alignOffset? = 0Select.Positioner["alignOffset"]
  • side? = "bottom"Select.Positioner["side"]
  • sideOffset? = 4Select.Positioner["sideOffset"]
  • alignItemWithTrigger? = trueSelect.Positioner["alignItemWithTrigger"]
SelectLabeldata-slot="select-label"Select.GroupLabelBase UI—
SelectItemdata-slot="select-item"Select.ItemBase UI—
SelectSeparatordata-slot="select-separator"Select.SeparatorBase UI—
SelectScrollUpButtondata-slot="select-scroll-up-button"Select.ScrollUpArrowBase UI—
SelectScrollDownButtondata-slot="select-scroll-down-button"Select.ScrollDownArrowBase UI—

Changelog

  1. v0.3.0Popover, DropdownMenu, ContextMenu, Menubar, Select, Combobox, HoverCard, Tooltip, Dialog and AlertDialog enter and exit with interruptible transitions on the kit easing tokens, and tw-animate-css is no longer a depen…minor
  2. v0.1.2Pad the Select list so options no longer sit flush against the popup edge, reserve room for the selected-item check, and scope the Shiki dark-theme rule to code tokens so code block chrome keeps its own colors.patch
  3. v0.1.0Restore open and close animations on every menu-family popup.patch
Full Select history

Last updated on

On this page