A lightweight, customizable, and accessible React select component with support for multi-select, async options, and keyboard navigation.
- ✅ Supports both single and multi-select
- ✅ Async options support (fetch data dynamically)
- ✅ Keyboard navigation (Arrow keys, Enter, Escape)
- ✅ Custom icons for options
- ✅ Fully customizable styles (default SCSS provided)
- ✅ Click outside to close
yarn add @nixxy/react-simple-select
or
npm install @nixxy/react-simple-select
import SimpleSelect, { Option } from '@nixxy/react-simple-select'; import '@nixxy/react-simple-select/dist/style.css'; const options: Option[] = [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Cherry', value: 'cherry' }, ]; export default function Example() { return ( <SimpleSelect options={options} onChange={(value) => console.log(value)} /> ); }
<SimpleSelect options={options} multiple onChange={(values) => console.log(values)} />
const fetchOptions = async () => { return new Promise<Option[]>((resolve) => setTimeout(() => { resolve([ { label: 'React', value: 'react' }, { label: 'Vue', value: 'vue' }, ]); }, 10000) ); }; <SimpleSelect options={fetchOptions} />;
| Prop | Type | Default | Description |
|---|---|---|---|
options |
Option[] or () => Promise<Option[]> |
[] |
The list of options (static or async) |
multiple |
boolean |
false |
Enables multi-select mode |
onChange |
(selected: Option or Option[]) => void |
undefined |
Callback triggered when selection changes |
placeholder |
string |
"Select..." |
Placeholder text when no option is selected |
className |
string |
"" |
Additional class names for styling |
- Arrow Down: Move to the next option
- Arrow Up: Move to the previous option
- Enter: Select the focused option
- Escape: Close the dropdown
You can customize the component using the className prop:
import { FiCoffee } from 'react-icons/fi'; <SimpleSelect className="custom-select" options={[{ value: 'coffee', label: 'Coffee', Icon: <FiCoffee /> }]} />;
If you want full control over the styles, you can skip importing the default CSS and write your own:
/* Base styles */ .nx-simple-select { /* Custom styles */ } .nx-simple-select .options { /* Custom dropdown styles */ } /* Hide dropdown icon */ .nx-simple-select .select-icon { display: none; } /* Add a background image to .nx-simple-select */ .nx-simple-select { background-image: url('your-image.png'); }
The default styles are primarily for testing, so you’re free to customize them however you like.
MIT
Feedback and contributions are welcome! Open an issue or submit a PR.