Skip to main content
The SelectMenu component provides a styled alternative to native select elements with support for custom dropdowns, hover interactions, and flexible value rendering.

​
Import

import { SelectMenu, SelectMenuRaw } from '@luminescent/ui-react';

​
Usage

import { SelectMenu } from '@luminescent/ui-react';

function Example() {
  const options = [
    { name: 'Option 1', value: 1 },
    { name: 'Option 2', value: 2 },
    { name: 'Option 3', value: 3 },
  ];

  return (
    <SelectMenu
      id="my-select"
      values={options}
      onChange={(e) => console.log(e.target.value)}
    >
      Choose an option
    </SelectMenu>
  );
}

​
Components

​
SelectMenu

The default component that includes a label wrapper. The children prop is rendered as the label text above the select menu.

​
SelectMenuRaw

A raw version without the label wrapper, useful when you need custom layout or already have a label.

​
Props

Both components extend all standard HTML <select> element attributes and accept the following additional props:
​
values
Array<{ name: React.ReactNode, value: string | number }>
Array of options to display in the dropdown menu. Each option has a name (displayed label) and value (form value).
​
dropdown
React.ReactNode
Custom content to display in the dropdown button. Used when customDropdown is true or when values is not provided.
​
customDropdown
boolean
default:"false"
When true, displays the dropdown prop content instead of the selected value name.
​
extra-buttons
React.ReactNode
Additional buttons or content to render at the bottom of the dropdown panel.
​
panelClass
string
default:"'lum-bg-lum-input-bg'"
CSS class for the dropdown panel background.
​
btnClass
string
default:"'lum-bg-transparent'"
CSS class for the option buttons inside the dropdown.
​
noblur
boolean
default:"false"
Disables the backdrop blur effect on the dropdown panel.
​
nocloseonclick
boolean
default:"false"
Prevents the dropdown from automatically closing when clicking outside.
​
hover
boolean
default:"false"
Opens the dropdown on hover instead of click.
​
align
'left' | 'right' | 'center'
Controls the alignment of the dropdown panel relative to the button.
​
className
string
Additional CSS classes for the dropdown button.

​
Behavior

  • Internally renders a hidden native <select> element for form compatibility
  • When an option is clicked, the native select is updated and dispatches a change event
  • The dropdown panel has a maximum height of 18rem (72) with scrolling
  • Smooth animations with motion-safe preferences respected
  • Clicking outside the dropdown automatically closes it (unless nocloseonclick is true)
  • The selected value persists and is displayed in the button

​
Examples

import { SelectMenu } from '@luminescent/ui-react';

function Basic() {
  const fruits = [
    { name: 'Apple', value: 'apple' },
    { name: 'Banana', value: 'banana' },
    { name: 'Orange', value: 'orange' },
  ];

  return (
    <SelectMenu
      id="fruit-select"
      values={fruits}
      onChange={(e) => console.log('Selected:', e.target.value)}
    >
      Select a fruit
    </SelectMenu>
  );
}
The SelectMenu maintains compatibility with native forms by using a hidden <select> element. This ensures proper form submission and integration with form libraries.

Build docs developers (and LLMs) love

Get started for freeTalk to us