<select id="custom-select" class="form-control" multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<select id="custom-select" class="form-control">
  <optgroup label="Option group">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
</select>

Via a bundler

import Selectra, { createSelectra } from 'selectra'

const customSelect = new Selectra('#custom-select')
customSelect.init()

// or

createSelectra('#custom-select')

@import "selectra/src/scss/index.scss"

To fetch the value

// Will return option1, or ['option1', 'option2'] if multiple and both selected
document.querySelector('#custom-select').val() 
// document.querySelector('#custom-select').value can still be used, though with multiple .selectedOptions should be used, .val() simplifies this

To set the value

document.querySelector('#custom-select').val('option1') 
// or for multiple
document.querySelector('#custom-select').val(['option1', 'option2'])

Via script import

<head>
  <link rel="stylesheet" href="<path-to-assets>/selectra.min.css">
</head>
...
<script src="<path-to-assets>/selectra.min.js"></script>
<script>
  const  customSelect = new Selectra('#custom-select', {
    search: true
  })
  customSelect.init()

  // or
  createSelectra('#custom-select', {
    search: true
  })
</script>

Set options programmatically

createSelectra('#custom-select', {
  options: [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' }
  ]
})

// or optgroups
createSelectra('#custom-select', {
  options: [
    {
      label: 'Group 1',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    },
    {
      label: 'Group 2',
      options: [
        { value: 'option3', label: 'Option 3' },
        { value: 'option4', label: 'Option 4' }
      ]
    }
  ]
})

Options

Option	Value	Description
search	boolean	Transforms the button into a input field, on click options open and can be searched
langInputPlaceholder	string	Sets the translated value for input. Default: Search
langEmptyValuePlaceholder	string	Sets the translated value if option yet to be selected. Default: Pick a value
options	array	Array of options, or option groups

CSS / SCSS variables

SCSS variable	CSS variable	Default value
$selectra-container-min-width	--selectra-container-min-width	300px
$selectra-options-bg	--selectra-options-bg	#eee
$selectra-options-max-height	--selectra-options-max-height	300px
$selectra-options-scrollbar-width	--selectra-options-scrollbar-width	6px
$selectra-options-scrollbar-track-color	--selectra-options-scrollbar-track-color	#f1f1f1
$selectra-options-scrollbar-thumb-color	--selectra-options-scrollbar-thumb-color	#888
$selectra-options-scrollbar-thumb-hover-color	--selectra-options-scrollbar-thumb-hover-color	#555
$selectra-options-shadow	--selectra-options-shadow	3px 3px 3px rgba(0, 0, 0, 0.16)
$selectra-options-border-radius	--selectra-options-border-radius	4px

Keywords

select

vanilla

FAQs

What is selectra?

Is selectra well maintained?

Package last updated on 20 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

selectra

Selectra

Features

Demo

Installation

Package manager

Manual

Usage

HTML