Dropdown

The Dropdown component is a customizable select input field that supports focus handling and floating labels. It provides a simple way to let users select an option from a list, with full support for accessibility, focus styles, and custom values.

Installation

bash
npm i @anakin-gbit/dropdown

Usage

JSX
<Dropdown
  label="Select an option"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
/>

The Dropdown component also accepts all standard SelectHTMLAttributes available to the regular <select> HTML element. This includes properties such as disabled, multiple, size, required, and more, allowing you to customize the dropdown further while maintaining full compatibility with standard select behavior.

Style overrides

Specific styles can be passed to the component like this:

JSX
<Dropdown
  label="Select an option"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
  containerStyle={{ marginBottom: 0 }}
  selectWrapperStyle={{ backgroundColor: 'lightGreen' }}
  selectStyle={{ marginBottom: '0' }}
/>