@fazlerabbytalukder/flexi-select-react

A lightweight React select component built on native <select> and <optgroup>.

Installation

npm install @fazlerabbytalukder/flexi-select-react

Quick start

import { FlexiSelect } from '@fazlerabbytalukder/flexi-select-react';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'mango', label: 'Mango' },
];

export default function App() {
  return (
    <FlexiSelect
      options={options}
      placeholder="Choose a fruit"
      onChange={(value) => console.log(value)}
    />
  );
}

Features

• Single select
• Multi select (isMulti)
• Grouped options (optgroup)
• Client-side search (isSearchable)
• Controlled and uncontrolled usage
• Clear button (isClearable)
• Custom option label/value/filter logic
• Basic style/className hooks

Option and group shape

interface OptionType {
  value: string | number;
  label: string;
  disabled?: boolean;
  [key: string]: unknown;
}

interface GroupType {
  label: string;
  options: OptionType[];
}

Supported props (currently implemented)

Core

• options: OptionType[] | GroupType[] (required)
• value?: SelectValue
• defaultValue?: SelectValue
• onChange?: (value: SelectValue) => void

Behavior

• isMulti?: boolean
• isSearchable?: boolean
• isClearable?: boolean
• isDisabled?: boolean
• placeholder?: string
• searchPlaceholder?: string

Custom logic

• filterOption?: (option, inputValue) => boolean
• getOptionLabel?: (option) => string
• getOptionValue?: (option) => string

Styling hooks in current component

• className?: string
• classNames?.container
• classNames?.control
• classNames?.searchInput
• classNames?.clearIndicator
• styles?.container
• styles?.control
• styles?.searchInput
• styles?.clearIndicator

Form and accessibility

• name?: string (adds hidden input)
• inputId?: string
• aria-label?: string
• aria-labelledby?: string

Controlled example

import { useState } from 'react';
import { FlexiSelect, type SelectValue } from '@fazlerabbytalukder/flexi-select-react';

const options = [
  { value: 1, label: 'One' },
  { value: 2, label: 'Two' },
  { value: 3, label: 'Three' },
];

export default function ControlledDemo() {
  const [value, setValue] = useState<SelectValue>(null);

  return (
    <FlexiSelect
      options={options}
      value={value}
      onChange={setValue}
      isClearable
      isSearchable
    />
  );
}

Multi-select example

import { FlexiSelect } from '@fazlerabbytalukder/flexi-select-react';

const options = [
  { value: 'red', label: 'Red' },
  { value: 'green', label: 'Green' },
  { value: 'blue', label: 'Blue' },
];

export default function MultiDemo() {
  return <FlexiSelect options={options} isMulti isSearchable isClearable />;
}

Grouped options example

import { FlexiSelect } from '@fazlerabbytalukder/flexi-select-react';

const grouped = [
  {
    label: 'Fruits',
    options: [
      { value: 'apple', label: 'Apple' },
      { value: 'mango', label: 'Mango' },
    ],
  },
  {
    label: 'Vegetables',
    options: [
      { value: 'carrot', label: 'Carrot' },
      { value: 'spinach', label: 'Spinach' },
    ],
  },
];

export default function GroupedDemo() {
  return <FlexiSelect options={grouped} />;
}

Notes

• This package currently uses native select rendering for reliability and simplicity.
• Some extra type fields exist for future expansion, but they are not all active in the current UI implementation.

License

MIT