react-select-kit

A highly flexible, premium, and customizable React component for select and multi-select inputs. Built with TypeScript and specialized for design-first developers.

Features

• ✨ Premium Design: Modern look with smooth transitions and shadows.
• 🛠️ Fully Customizable: Override any style via CSS variables or granular style/className props.
• 📱 Responsive: Works across all screen sizes.
• 🎨 Display Modes: Choose between badges, list (comma-separated), or count summary.
• ✅ Checkboxes: Optional checkboxes for multi-select.
• 🧹 Clearable: Reset selection with a single click.
• 🗺️ Icons: Support for icons in options and selected items.
• 🧩 Custom Renderers: Inject your own JSX for options and values.

Installation

npm install react-select-kit

Basic Usage

import { MultiSelect } from 'react-select-kit';
import 'react-select-kit/dist/index.css';

const OPTIONS = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
];

function App() {
  const [selected, setSelected] = useState([]);

  return (
    <MultiSelect
      options={OPTIONS}
      value={selected}
      onChange={setSelected}
    />
  );
}

API Reference

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | options | Option[] | [] | Array of { label, value, icon } objects. | | value | string \| string[] | - | Current selection. | | onChange | func | - | Callback when selection changes. | | multiple | boolean | true | Toggle single/multi-select modes. | | displayMode| 'badges' \| 'list' \| 'count' | 'badges' | How to show selected items. | | countSuffix| string | 'items' | Suffix for the 'count' mode. | | checkbox | boolean | false | Show checkboxes in list (multi-select only). | | clearable | boolean | false | Show button to clear all selections. | | placeholder| string | 'Select...' | Placeholder text. | | showIcon | boolean | true | Toggle dropdown arrow visibility. | | renderOption| func | - | Custom renderer: (option, isSelected) => JSX | | renderValue | func | - | Custom renderer: (value, options) => JSX |

Styling Guide

1. CSS Variables (Theming)

You can customize the theme globally by overriding these CSS variables in your root stylesheet:

:root {
  --rms-primary: #3b82f6;
  --rms-bg: #ffffff;
  --rms-text: #1e293b;
  --rms-border: #e2e8f0;
  --rms-radius: 8px;
  --rms-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

2. Granular Selection (classNames & styles)

For advanced designers, you can target individual elements via the classNames or styles props:

<MultiSelect
  classNames={{
    container: 'my-custom-container',
    trigger: 'my-trigger',
    badge: 'my-badge-style',
    dropdown: 'my-menu'
  }}
  styles={{
    option: { padding: '20px' },
    trigger: { border: '2px solid black' }
  }}
/>

Available keys: container, trigger, value, dropdown, option, badge, badgeRemove, checkbox, clearBtn.

License

ISC ©