dropdown

registry:ui

dropdown menu with keyboard navigation and ascii borders

installation

npx shadcn@latest add https://asciicn.fldr.zip/r/dropdown.json

usage

import Dropdown from "@/registry/ascii/dropdown";

const options = [
  { value: "1", label: "option 1" },
  { value: "2", label: "option 2" },
];

<Dropdown
  options={options}
  value={selected}
  onChange={setSelected}
/>

examples

basic

selected: dark

with icons

selected: none

single border (default)

double border

disabled

keyboard shortcuts

key

action

space / enter

open dropdown or select option

↑ / ↓

navigate options

esc

close dropdown

props

prop

type

default

description

options

array

required

dropdown options

value

string

selected value

onChange

function

change handler

placeholder

string

"select option"

placeholder text

variant

string

"single"

border style

disabled

boolean

false

disabled state