Transforms HTML select elements into groups of radio buttons or checkboxes.
<select> element provides a good interface for selecting one or more named options, but we often want to display these options using checkboxes or radio buttons. Rather than having separate implementations for each of these, this module allows you to just use
<select>s and it will transform them into groups of inputs and handle the two-way binding to keep them in sync.
import SelectTransformer from 'select-transformer'; // see Module Formats below new SelectTransformer(document.querySelector('select#my-select'));
select.multiple property is used to decide whether to use radio buttons or checkboxes.
<optgroup> elements are wrapped in an
<div class="st-group"> element that you can use for styling.
There is some very basic styling in
dist/assets/default.css that you can use as a base.
Other DOM Manipulation Libraries
SelectTransformer uses a minimal set of jQuery fuctions, which could easily be provided by another library (such as domquery). You can use
SelectTransformer.setDOM() to provide a jQuery-like object, but this hasn't been tested.
You will find all the popular formats in
Use the handy ember-cli addon called ember-select-transformer.