ractive-select

A `<select>` replacement for ractive

Usage no npm install needed!

<script type="module">
  import ractiveSelect from 'https://cdn.skypack.dev/ractive-select';
</script>

README

ractive-select

A replacement for <select> tags that allows full styling and customizability.

Demo

Live Demo

Install

npm install ractive-select --save

Features

  • Themable
  • Supports native mobile UI
  • Keyboard support (arrow keys, space/enter, jump to item by typing)

Usage

Add the select to your Ractive instance:

Ractive.extend({
    ...
    components: {
        select: require('ractive-select')
    },
    ...
});

Use it like a normal select element

<select value='{{ myValue }}'>
 {{#each options}}
 <option>{{this}}</option>
 {{/each}}
 <option>some other option</option>
</select>

Or if you already have an array:

<select items='{{options}}'></select>

...
data: {
    // can either be array of primitives
    items: ["foo", "bar", "baz"],

    // or array of objects with `value` and `label` -> <option value='{{value}}'>{{label}}</option>
    items: [{label: "foo", value: "_FOO", ...}],
},
...