React + TypeScript + Vite

MIUI Dropdown

A customizable dropdown (select) component inspired by MIUI, built with React and Material UI (MUI). Supports dark mode, accessibility features, and flexible styling.

📦 Installation

This package has some required peer dependencies. Make sure you have them installed in your project:

npm install @mui/material @emotion/react @emotion/styled react react-dom

Then install the dropdown package:

npm install miui-dropdown

📝 License MIT

✨ Props

| Prop | Type | Default | Description | |--------------|------------------------------------------|-----------|--------------------------------------------------| | options | { value: string; label: string }[] | Required | The dropdown items | | value | string | Required | Currently selected value | | onChange | (value: string) => void | Required | Callback when the selection changes | | label | string | "" | Label for the dropdown | | showLabel | boolean | true | Whether to show the label | | darkMode | boolean | false | Enables dark mode theme | | minWidth | number | 120 | Minimum width of the dropdown | | disabled | boolean | false | Disables the dropdown | | error | boolean | false | Shows error style | | required | boolean | false | Marks the field as required | | errorText | string | "" | Error message text | | placeHolder| string | "None" | Placeholder item if no value is selected | | fullWidth | boolean | false | Makes the dropdown take full width of container |

🧩 Usage

import React, { useState } from 'react';
import MiuiDropdown from 'miui-dropdown';

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

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

  return (
    <MiuiDropdown
      options={options}
      value={value}
      onChange={setValue}
      label="Select Fruit"
      showLabel={true}
      darkMode={false}
      placeHolder="Choose one"
      fullWidth
    />
  );
};

export default App;