Minecraft cycle-button trigger with a selectable popup list.
Preview
Example source could not be loaded: select-example. Reload this page to retry.Usage
Import Select, SelectTrigger, SelectValue, SelectContent and SelectItem from @/components/ui/select. Supply Root items with matching value/label pairs so SelectValue resolves the selected label. Use value/onValueChange(next, details) or defaultValue.
Composition
Place SelectValue inside the accessible trigger and items inside the portaled SelectContent. The example uses alignItemWithTrigger={false} and sideOffset={4} at scale 2. SelectGroup, SelectLabel and SelectSeparator organize longer menus; scroll buttons are available for constrained popup height. Native Select offers a real HTML select when platform popup behavior is preferable.
API and accessibility
The trigger supports only size="default" and long text scrolls. The default popup aligns its selected item with the trigger; content defaults to bottom/start with collision padding 10. Cycle-button artwork and native language-list constituents are reused in a web dropdown composition. No chevron/checkmark variant is promised by this wrapper. Popup lifetime follows the Select primitive’s default behavior.
See the underlying API for shared semantics.
Placeholder and disabled choice
Example source could not be loaded: select-placeholder-example. Reload this page to retry.Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Select as SelectPrimitive } from "@base-ui/react/select";
import * as React from "react";
import { minecraftGlyphs } from "./minecraft-font";
import {
isMinecraftRefCallback,
isMinecraftRefCleanup,
isMinecraftRenderCallback,
isMinecraftTextContent,
minecraftClasses as cn,