Warren UI

NativeSelect

Styled native select with square chevron.

Source
"use client"

import { Label } from "@/registry/warren/label/label"
import { NativeSelect } from "@/registry/warren/native-select/native-select"

export default function NativeSelectDemo() {
  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 htmlFor="route-mode">ROUTE MODE</Label>
        <NativeSelect id="route-mode" defaultValue="idle">
          <option value="idle">IDLE</option>
          <option value="rte">RTE</option>
          <option value="att">ATT</option>
          <option value="drf">DRF</option>
        </NativeSelect>
      </div>
    </div>
  )
}

Installation

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

Usage

import { NativeSelect } from "@/components/ui/native-select"
<NativeSelect defaultValue="idle">
  <option value="idle">IDLE</option>
  <option value="rte">RTE</option>
  <option value="att">ATT</option>
  <option value="drf">DRF</option>
</NativeSelect>

Sizes

sm · md · lg

Source
"use client"

import { NativeSelect } from "@/registry/warren/native-select/native-select"

export default function NativeSelectSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <NativeSelect size="sm" defaultValue="rte">
        <option value="idle">IDLE</option>
        <option value="rte">RTE</option>
        <option value="att">ATT</option>
        <option value="drf">DRF</option>
      </NativeSelect>
      <NativeSelect size="md" defaultValue="rte">
        <option value="idle">IDLE</option>
        <option value="rte">RTE</option>
        <option value="att">ATT</option>
        <option value="drf">DRF</option>
      </NativeSelect>
      <NativeSelect size="lg" defaultValue="rte">
        <option value="idle">IDLE</option>
        <option value="rte">RTE</option>
        <option value="att">ATT</option>
        <option value="drf">DRF</option>
      </NativeSelect>
    </div>
  )
}

Width

The component's wrapper is w-full and the <select> fills it, so the field always spans its container — pass w-full on a parent (or the component's own className, which lands on the <select>) to size it. There is no shrink-to-fit mode; the wrapper width is the source of truth.

Notes

Author each <option> label in uppercase mono caps, matching the design language. In WebKit browsers the closed <select> list renders with the user-agent font and does not inherit the component's font-mono — authoring labels in uppercase keeps the closed state consistent across engines.

API Reference

Prop

Type

On this page

InstallationUsageSizesWidthNotesAPI Reference