<label for="button_text">
    Button with text
</label>
<input type="button" id="button_text" value="Click here!">
<label for="button_icon">
    Button with icon
</label>
<input type="button" id="button_icon" aria-label="Click here!"
     class="exo-icon exo-icon-home">
<label for="button_icon_text">
    Button with icon and text
</label>
<input type="button" id="button_icon_text"
     value="Click here!!!!!!!!!!!!!!" class="exo-icon exo-icon-home exo-bold">
<label for="button_bigicon_text">
    Button with huge icon and text
</label>
<input type="button" id="button_bigicon_text"
     value="Click Here!!!!!!!!" class="exo-icon exo-icon-huge exo-huge exo-icon-home">
                

<label for="toggle_green">
    Checkbox rendered as a colored toggle
</label>
<label>
    <span class="exo-toggle">
        <input type="checkbox" checked
             id="toggle_green">
        <span class="exo-toggle-slide exo-dark-green-bg"/>
    </span>
</label>
<label for="toggle_lightblue">
    Checkbox rendered as a colored toggle
</label>
<label>
    <span class="exo-toggle">
        <input type="checkbox" checked
             id="toggle_lightblue">
        <span class="exo-toggle-slide exo-light-blue-bg"/>
        <span class="exo-toggle-true">
            ON
        </span>
        <span class="exo-toggle-false">
            OFF
        </span>
    </span>
</label>
                

<label for="num">
    Number
</label>
<input id="num" type="number" value="10"
     max="20" min="0" class="exo-rounded exo-cell-left">
                

<label for="slider">
    Slider:
    <output id="result" for="slider">
        10
    </output>
</label>
<div style="display:flex;">
    0
    <input id="slider" type="range" value="10"
         max="20" min="0" 
 oninput="result.value=slider.value"
         style="display:inline;">
    20
</div>
                

<div>
    <label for="checkb">
        Checkbox
    </label>
    <input id="checkb" type="checkbox" checked="">
</div>
<div>
    <label for="checkb2">
        Checkbox (Red)
    </label>
    <input id="checkb2" type="checkbox" class="exo-dark-red-bg"
         checked="">
    <span class="exo-checkbox-true">
        YES
    </span>
    <span class="exo-checkbox-false">
        NO
    </span>
</div>
                

<label for="dd">
    Select control (drop down)
</label>
<select id="dd" class="exo-light-orange-bg">
    <option value="o1">
        option 1
    </option>
    <option value="o2">
        option 2
    </option>
</select>
                

<label for="sel">
    Select control (list view)
</label>
<select id="sel" size="5" class="exo-light-green-bg">
    <option value="o1">
        option 1
    </option>
    <option value="o2">
        option 2
    </option>
    <option value="o3">
        option 3
    </option>
    <option value="o4">
        option 4
    </option>
    <option value="o5">
        option 5
    </option>
    <option value="o6">
        option 6
    </option>
</select>
                

<label for="file-chooser">
    Choose A File
</label>
<input id="file-chooser" type="file" class="exo-dark-blue-bg exo-white-fg">
                

<label for="date_example">
    Input Date
</label>
<input id="date_example" type="date" class="exo-dark-red-bg exo-white-fg">
                

<label for="rbs">
    Radio Buttons
</label>
<div id="rbs">
    <label for="b1" style="display:inline-block;">
        <span class="label-body">
            Apples
        </span>
    </label>
    <input id="b1" type="radio" name="fruit"
         
 value="apples" class="exo-dark-green-bg"
         checked="">
    <label for="b2" style="display:inline-block;">
        <span class="label-body">
            Oranges
        </span>
    </label>
    <input id="b2" type="radio" name="fruit"
         
 value="oranges" class="exo-dark-orange-bg">
    <label for="b3" style="display:inline-block;">
        <span class="label-body">
            Grapes
        </span>
    </label>
    <input id="b3" type="radio" name="fruit"
         
 value="grapes" class="exo-dark-purple-bg">
</div>
                

<label for="ta">
    Text Area
</label>
<textarea class="exo-light-green-bg" id="ta"
     rows="10"></textarea>