slim-select

Slim Select

The select dropdown, reimagined.

A lightweight, dependency-free replacement for the native `` — single and multi-select, search, optgroups, remote data, modal mode on mobile, and full theming through CSS variables. Drop it into any stack, or use the official Vue and React wrappers.

slimselectjs.com

Documentation

Full docs, live demos, and copy-paste examples: slimselectjs.com

• Get started
• Settings
• Methods
• Events
• Styling

Features

Select, upgraded

• Single and multi-select with tags, placeholders, and deselect
• Search with highlighting, remote/API search, and user-addable options
• Optgroups with select-all and closable accordion groups
• HTML options, tooltips, min/max selection limits, and disabled options
• Modal mode (off | on | mobile) — centered panel with backdrop; mobile-friendly by default

Looks like your product

• Theme entirely with --ss-* CSS custom properties — no fighting class specificity
• Import plain CSS or SCSS; inherit styles and classes from the native ``

Built to ship

• Zero dependencies
• ~66KB JS (~16KB gzip) · ~12KB CSS (~2KB gzip)
• TypeScript types included
• WCAG 2.1 Level AA accessibility (ARIA, keyboard, screen reader support)
• prefers-reduced-motion respected
• 477 unit tests + 46 Playwright E2E tests

Framework ready

• Vanilla JS
• Vue 3 component with v-model
• React component with hooks and ref access

Installation

npm install slim-select

CDN

Quick start

import SlimSelect from 'slim-select'
import 'slim-select/styles' // or: import 'slim-select/scss'

new SlimSelect({
  select: '#selectElement'
})

  Value 1

Styling

Slim Select is styled with CSS variables. Set them on a wrapper around your select (or on :root for a global theme):

.my-form {
  --ss-primary-color: #2563eb;
  --ss-bg-color: #ffffff;
  --ss-font-color: #1e293b;
  --ss-border-color: #e2e8f0;
  --ss-border-radius: 8px;
  --ss-main-height: 44px;
}

See the full token list and live themes on the Style docs.

Data

Pass an array of options and optgroups instead of (or in addition to) native `` elements:

new SlimSelect({
  select: '#selectElement',

  data: [
    { text: 'Value 1', value: 'value1' },
    {
      label: 'Group label',
      options: [
        { text: 'Value 2', value: 'value2' },
        { text: 'Value 3', value: 'value3' }
      ]
    }
  ]
})

Data types

…

Settings

All fields are optional. Values shown are defaults.

Full settings documentation

…

Methods

Full methods documentation

const slim = new SlimSelect({ select: '#selectElement' })

slim.enable()
slim.disable()
slim.getData()
slim.setData(data)
slim.getSelected() // string[]
slim.setSelected(['value1', 'value2'])
slim.addOption(option)
slim.open()
slim.close()
slim.search('searchValue')
slim.destroy()

Vue

Official Vue 3 component with v-model and full TypeScript support.

Vue documentation

npm install slim-select

Note: Pass options via the :data prop. Native `` slot children are not supported in the Vue wrapper.

React

Official React component with hooks and ref access to the underlying instance.

React documentation

npm install slim-select

import { useState } from 'react'
import SlimSelect from 'slim-select/react'
import 'slim-select/styles'

function MyComponent() {
  const [selected, setSelected] = useState('value2')
  const options = [
    { text: 'Value 1', value: 'value1' },
    { text: 'Value 2', value: 'value2' },
    { text: 'Value 3', value: 'value3' }
  ]

  return 
}

Note: Pass options via the data prop. Native `` children are not supported in the React wrapper.

Ref access

import { useRef } from 'react'
import SlimSelect, { SlimSelectRef } from 'slim-select/react'
import 'slim-select/styles'

function MyComponent() {
  const slimRef = useRef(null)

  return (
    <>
      
       slimRef.current?.slimSelect?.open()}>Open
    
  )
}

Support