Components

Neon Select

Fully accessible custom dropdown with keyboard navigation (arrows/enter/esc), controlled and uncontrolled modes, neon glow trigger, animated clip-path listbox panel, and disabled option support.

npx neonblade add neon-select

USE CASE — SYSTEM CONFIG

Primary Weapon System

Network Node

Clearance Level

VARIANTS

Square (default)

Corner Cut

COLORS

SIZES

Small

Medium

Large

DISABLED

System Locked

Props Configuration

Prop	Type	Default	Description
`options`	`NeonSelectOption[]`	-	Options list. Each item: { value, label?, disabled? }.
`value`	`string`	-	Controlled selected value.
`defaultValue`	`string`	-	Default value (uncontrolled).
`onChange`	`(value: string) => void`	-	Change handler called with the selected option value.
`placeholder`	`string`	`"SELECT..."`	Placeholder text when nothing is selected.
`color`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Neon accent color.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset controlling padding and font size.
`variant`	`"square" \| "corner-cut"`	`"square"`	square is a standard bordered box; corner-cut clips the bottom-right corner with a properly bordered diagonal using the two-layer frame technique.
`label`	`string`	-	Optional field label rendered above the trigger in accent colour.
`disabled`	`boolean`	`false`	Disable the entire select.
`className`	`string`	-	Additional className on the wrapper.
`id`	`string`	-	id for the trigger button.
`ariaLabel`	`string`	-	aria-label for the trigger and dropdown list.