A drop-in replacement for <select> elements with some other cool features
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src
.gitignore
Gruntfile.js
README.md
package.json
ractive-select.js
ractive-select.min.js
webpack.config.js

README.md

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", ...}],
},
...