Getting Started

Install the package and import it into your project. Then call fancySelect() on any <select> element.

Configuration

Pass an options object as the second argument to customize behavior. Use the format option to control how the config file is parsed.

Format

JavaScript

JSON

YAML

TOML

XML

export default {
  output: {
    dir: 'dist',
  },
}

Options

Defaults are shown below.

Option	Type	Default	Description
`format`	`string`	`"javascript"`	The config file format to use.
`placeholder`	`string`	`"Select…"`	Text shown when no option is selected.
`searchable`	`boolean`	`false`	Adds a search input to the dropdown.
`maxHeight`	`string`	`"240px"`	Maximum height of the open dropdown.

Events

The enhanced element fires a change event just like a native <select>, so existing event listeners continue to work without modification.

const el = document.querySelector('#my-select')
fancySelect(el, { searchable: true })

el.addEventListener('change', (e) => {
  console.log('selected:', e.target.value)
})

Styling

The component exposes CSS custom properties for theming. Override them in your own stylesheet to match your design system.

.fancy-select {
  --fs-background: #1a1a1a;
  --fs-border: #404040;
  --fs-border-radius: 8px;
  --fs-color: #e0e0e0;
  --fs-highlight: #2a2a2a;
  --fs-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

For full control, the internal DOM structure is documented in the API reference.