Select

ROUTE MODE

Source

"use client"

import { Label } from "@/registry/warren/label/label"
import { Select } from "@/registry/warren/select/select"

const ROUTE_MODES = [
  { value: "idle", label: "IDLE" },
  { value: "rte", label: "RTE" },
  { value: "att", label: "ATT" },
  { value: "drf", label: "DRF" },
]

export default function SelectDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <div className="flex flex-col gap-1 rounded-none border-2 border-border bg-panel p-3">
        <Label>ROUTE MODE</Label>
        <Select options={ROUTE_MODES} defaultValue="idle" />
      </div>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/select.json

Usage

import { Select } from "@/components/ui/select"

<Select
  defaultValue="idle"
  options={[
    { value: "idle", label: "IDLE" },
    { value: "rte", label: "RTE" },
    { value: "att", label: "ATT" },
    { value: "drf", label: "DRF" },
  ]}
/>

Sizes

sm · md · lg

Source

"use client"

import { Select } from "@/registry/warren/select/select"

const ROUTE_MODES = [
  { value: "idle", label: "IDLE" },
  { value: "rte", label: "RTE" },
  { value: "att", label: "ATT" },
  { value: "drf", label: "DRF" },
]

export default function SelectSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Select size="sm" options={ROUTE_MODES} defaultValue="rte" />
      <Select size="md" options={ROUTE_MODES} defaultValue="rte" />
      <Select size="lg" options={ROUTE_MODES} defaultValue="rte" />
    </div>
  )
}

The list is a real role="listbox"; focus stays on the trigger and the active option is exposed via aria-activedescendant. Keys: Enter/Space commit, ↑/↓ move (skipping disabled options), Home/End jump to the first/last enabled option, Esc closes. The dropdown is absolutely positioned within the wrapper (no portal) and may clip inside overflow-hidden ancestors — same accepted limitation as Popover.

API Reference

Prop

Type