<%= require('html-loader!./../components/header.html') %>
<%= require('html-loader!./../components/sidebar-documentation.html') %>

Selection Input

A selection input allows a user to select a value from a series of options.

Variants size of selection input

There're 3 variants of selection, its : small, medium, large

Here is the way to choose one of them, just put class like -small, -medium, -large part on the class. You only have to choose one.

As default we dont put -medium class for medium variant size.

Or you can put -medium class to make sure you choose medium variant size for selection input.

Style Selection Input

There're 2 variant styles of selection input, its : -text and -tinted. Text style is mean, all of component form is white background, and then Tinted is mean grey background.

If you want choose grey background, just add this .t-input-select-tinted class
If not (white background), keep it class .t-input-select only.

*Notes : before you create an element form, you have to wrapped it using form class, like this <form class="t-form"> so, you can put some elements inside form tag.

Source code

<div class="t-input-select">
  <select>
    <option value="">Option one</option>
    <option value="">Option two</option>
  </select>
  <div class="t-input-select-arrow"></div>
</div>

                                
Source code

<div class="t-input-select t-input-select-disabled">
  <select disabled>
    <option value="">Option</option>
  </select>
  <div class="t-input-select-arrow"></div>
</div>

                                
<%= require('html-loader!./../components/footer-documentation.html') %>
<%= require('html-loader!./../components/footer.html') %>
<%= require('html-loader!./../components/footer-script.html') %>