Paperbase forms

Switch


<div class="pb-switch">
            <input type="checkbox" checked="checked" name="switch_1" id="switch_1" class="pb-switch_input">
            <label for="switch_1" class="pb-switch_inset"></label>
        </div>

Switch with label active


<div class="pb-switch">
            <input type="checkbox" name="switch_2" id="switch_2" class="pb-switch_input">
            <label for="switch_2" class="pb-switch_inset"></label>
        </div>

Switch with label inactive

Checkbox not checked


<div class="pb-control">
            <input type="checkbox" name="checkbox_1" id="checkbox_1">
            <label for="checkbox_1">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_check_box_outline_blank"/>
</svg>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_check_box"/>
</svg>
            </label>
        </div>

Checkbox


<div class="pb-control">
            <input type="checkbox" name="checkbox_2" id="checkbox_2" checked="checked">
            <label for="checkbox_2">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_check_box_outline_blank"/>
</svg>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_check_box"/>
</svg>
            </label>
        </div>

Checkbox (checked)


<div class="pb-control">
            <input type="radio" name="radio_1" id="radio_1">
            <label for="radio_1">
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_radio_button_unchecked"/>
</svg>
<svg viewbox="-4 -4 32 32" class="pb-icon
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_radio_button_checked"/>
</svg>
            </label>
        </div>

Radiobutton 1

Radiobutton 2 (checked)

Textfields


<div class="pb-textfield pb-textfield--dense">
            <input type="text class=" pb-textfield_input""="" name="textfield_0" id="textfield_0" placeholder="" value="">
            <hr class="pb-textfield_guide">
            <label for="textfield_0" class="pb-color-text_secondary">Simple textfield without
                hint</label>
        </div>

Simple textfield without hint


<div class="pb-textfield">
            <input type="text class=" pb-textfield_input""="" name="textfield_1" id="textfield_1" placeholder="" value="" required>
            <hr class="pb-textfield_guide">
            <label for="textfield_1" class="pb-color-text_secondary">Textfield label when not
                filled
                out<span class="pb-required">*</span></label>
            <div class="pb-hint">Hint text</div>
        </div>

Textfield label when not filled out required field out*

Hint text

Textfield label when filled out*

Hint text


<div class="pb-textfield">
            <input type="text" class="pb-textfield_input" name="textfield_3" id="textfield_3" placeholder="" value="">
            <hr class="pb-textfield_guide">
            <label for="textfield_3" class="pb-color-text_secondary">Textfield with error
                hint</label>
            <div class="pb-hint pb-color-text_error">Hint error text</div>
        </div>

Textfield with error hint

Hint error text

Range slider


<input type="range" class="pb-rangeslider">

Selectbox


<div class="pb-dropdown">
            <label class="" for="selectbox_1">Selectbox<span class="pb-required">*</span></label>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--selectbox
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_arrow_drop_down"/>
</svg>
            <select name="selectbox_1" class="pb-dropdown_select" tabindex="5">
                <option disabled value="-" class="pb-dropdown_first">Selectbox</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <div class="pb-hint"></div>
        </div>


<div class="pb-dropdown pb-dropdown--active">
            <label class="" for="selectbox_1">Selectbox<span class="pb-required">*</span></label>
<svg viewbox="-4 -4 32 32" class="pb-icon
 pb-icon--selectbox
">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="svg/gui.svg#pb-icon_arrow_drop_down"/>
</svg>
            <select name="selectbox_1" class="pb-dropdown_select" tabindex="5">
                <option disabled value="-" class="pb-dropdown_first">Selectbox</option>
                <option value="1">Option selected</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <div class="pb-hint"></div>
        </div>