koolcodez / react-searchable-dropdown logo
esc

Type to search...

The problem

Dropdown styling is either too rigid (component ships with opinions you can't override) or too barebones (you write every single style from scratch). Neither is great when you just want a dropdown that looks like the rest of your app.

This library ships two optional CSS files (one for single, one for multi) that give you a working dark theme out of the box. You can use them as-is, override specific pieces with CSS variables, or skip them entirely and pass your own class names.

Default styles

Import the stylesheets from the package to get the default dark theme.

imports.ts 
// Single select
import "@luciodale/react-searchable-dropdown/dist/single-style.css";

// Multi select
import "@luciodale/react-searchable-dropdown/dist/multi-style.css";

CSS variables

The default stylesheets use CSS custom properties scoped to the .lda-searchable-dropdown class for all colors, spacing, and sizes. Override any variable to match your design system without rewriting the entire stylesheet. Here are all the defaults:

variables.css (defaults) 
.lda-searchable-dropdown {
  /* Colors */
  --color-background: rgb(9, 9, 11);
  --color-disabled: rgb(20, 20, 24);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-focus: #ef4723;
  --color-text: rgba(255, 255, 255, 0.9);
  --color-text-secondary: rgba(255, 255, 255, 0.4);
  --color-chip-bg: rgba(255, 255, 255, 0.1);
  --color-chip-hover: rgba(255, 255, 255, 0.15);
  --color-chip-close-hover-bg: rgba(255, 255, 255, 0.2);
  --color-chip-close-hover-text: rgba(255, 255, 255, 0.9);
  --color-option-hover: rgba(255, 255, 255, 0.06);
  --color-option-selected: rgba(239, 71, 35, 0.15);
  --color-option-group: rgba(239, 71, 35, 0.12);
  --color-option-disabled: rgba(255, 255, 255, 0.02);

  /* Sizes */
  --width-container: 300px;
  --height-input: 40px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-circle: 50%;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 4px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-xxl: 20px;

  /* Typography */
  --font-size-sm: 12px;
  --font-size-base: 14px;

  /* Transitions */
  --transition-fast: 0.1s;
  --transition-base: 0.15s;

  /* Shadows */
  --shadow-focus: 0 0 0 2px rgba(239, 71, 35, 0.2);
  --shadow-dropdown: 0 4px 6px -1px rgb(0 0 0 / 0.3),
    0 2px 4px -2px rgb(0 0 0 / 0.2);
}

Custom class names

For full control, skip the default stylesheet entirely and pass your own CSS classes via the class name props. Every visual element has its own prop.

CustomClassesExample.tsx 
<SearchableDropdown
  options={options}
  value={value}
  setValue={setValue}
  classNameSearchableDropdownContainer="my-dropdown"
  classNameSearchQueryInput="my-input"
  classNameDropdownOptions="my-options-list"
  classNameDropdownOption="my-option"
  classNameDropdownOptionFocused="my-option--focused"
  classNameDropdownOptionSelected="my-option--selected"
  classNameDropdownOptionLabel="my-option-label"
  classNameDropdownOptionLabelFocused="my-option-label--focused"
  classNameDropdownOptionNoMatch="my-no-match"
  classNameTriggerIcon="my-icon"
  classNameTriggerIconInvert="my-icon--open"
  placeholder="Search..."
/>

When you pass custom class names, they replace the defaults entirely (not merge). This means no specificity issues. Your classes are the only classes applied.

Custom icon

The default dropdown icon is a simple chevron. Pass a DropdownIcon component to replace it. It receives a toggled prop indicating whether the dropdown is open.

CustomIconExample.tsx 
function ChevronIcon({ toggled }: { toggled: boolean }) {
  return (
    <svg
      className={`my-icon ${toggled ? "my-icon--rotated" : ""}`}
      viewBox="0 0 24 24"
      fill="currentColor"
    >
      <title>Toggle</title>
      <path d="M7 10l5 5 5-5H7z" />
    </svg>
  );
}

<SearchableDropdown
  options={options}
  value={value}
  setValue={setValue}
  DropdownIcon={ChevronIcon}
/>

Full custom theme example

For a complete working example that replaces all default styles with a custom theme, see the Custom Theme demo. It shows every className prop in action with a frost/indigo aesthetic that looks nothing like the default.

Next steps