selectra

v1.0.12

Published

9 months ago

> NPM package link https://www.npmjs.com/package/selectra

Downloads

0High
0Medium
0Low

ciryk

select vanilla

NPM package link https://www.npmjs.com/package/selectra

Selectra

Vanilla JS Select2 replacement, no jQuery components just pure JS. A custom select input

Features

Supports multiple
Supports search filter if enabled in option
Supports optgroup
Supports query selector, allows to initiate multiple selects by class
Tabbing through input fields still triggers this custom element
Easy to setup
Works with frameworks such as VueJS, example included in demo

Demo

You can view a demo using the latest files on https://cirykpopeye.github.io/selectra/

Installation

Package manager

npm install selectra

Manual

Copy both dist/selectra.min.css and dist/selectra.min.js

Usage

HTML

<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 |