react-floating-select

A lightweight and customizable React select component with floating label, built without any native <select> element.

Requirements

• Node.js : >=20.19.0 or >=22.12.0
• React : >=17.0.0
• React DOM : >=18
• Editor : Visual Studio Code (recommended)

Installation

npm install react-floating-select

Then add this to your vite.config.js:

optimizeDeps: {
  include: ['react-floating-select']
}

Usage

import CustomSelect from 'react-floating-select';
import 'react-floating-select/dist/react-floating-select.css';

const App = () => {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <CustomSelect
      label="Department"
      name="department"
      value={value}
      onChange={handleChange}
      options={["Sales", "Marketing", "Engineering", "Legal"]}
    />
  );
};

Examples

Simple string options

<CustomSelect
  label="City"
  name="city"
  value={value}
  onChange={handleChange}
  options={["Paris", "Lyon", "Marseille"]}
/>

Object options (e.g. US states)

Pass objects with name and abbreviation keys :

const states = [
  { name: "California", abbreviation: "CA" },
  { name: "New York", abbreviation: "NY" },
  { name: "Texas", abbreviation: "TX" },
];

<CustomSelect
  label="State"
  name="state"
  value={value}
  onChange={handleChange}
  options={states}
/>

Full width

<CustomSelect
  label="Department"
  name="department"
  value={value}
  onChange={handleChange}
  options={["Sales", "Marketing"]}
  fullWidth
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | "" | Floating label text | | name | string | "" | Input name (used in onChange) | | options | array | [] | Array of strings or { name, abbreviation } objects | | value | string | "" | Controlled value | | onChange | function | — | Callback (e) => e.target.value | | placeholder | string | "" | Placeholder text | | className | string | "" | Additional CSS class on wrapper | | fullWidth | boolean | false | Stretches to 100% width | | disabled | boolean | false | Disables the select |