Forms

Please avoid building HTML forms manually. Use the Symfony Form component, instead.

Textfield

<form>
    <div class="form-group">
        <div class="floating-label">
            <label for="exampleInputFloatingLabel1">Floating label</label>
            <input class="form-control" id="exampleInputFloatingLabel1" placeholder="Placeholder" type="text">
            <small id="exampleInputFloatingLabel1Help" class="form-text text-muted">Some help text.</small>
        </div>
    </div>
    <div class="form-group">
        <div class="floating-label">
            <input class="form-control" id="exampleInputFloatingLabel2" placeholder="Placeholder" type="text" value="value">
            <label for="exampleInputFloatingLabel2">Floating label with value</label>
            <small id="exampleInputFloatingLabel1Help" class="form-text text-muted">Some help text.</small>
        </div>
    </div>
</form>

Select

<form>
    <div class="form-group">
        <div class="floating-label">
            <label for="exampleSelectFloatingLabel3">Select Floating label</label>
            <select class="form-control" id="exampleSelectFloatingLabel3">
                <option></option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
    </div>
</form>

Multiple Select

The css expects the select to be inside a .chip-selector-container.

<form>
    <div class="form-group">
        <div class="chip-selector-container">
            <div class="floating-label">
                <label for="exampleSelectFloatingLabel4">Select Floating label</label>
                <select class="form-control" id="exampleSelectFloatingLabel4"
                    multiple
                    data-no-choices-text="No choices available"
                    data-item-select-text="Select this item">
                    <option selected>Piet</option>
                    <option>Klaas</option>
                    <option selected data-label="label">Jan</option>
                </select>
            </div>
        </div>
    </div>
</form>

With close after select

This example closes the dropdown after selecting an option. Whereas the default is to keep it open.

<form>
    <div class="form-group">
        <div class="chip-selector-container">
            <div class="floating-label">
                <label for="exampleSelectFloatingLabel5">Select Floating label</label>
                <select class="form-control" id="exampleSelectFloatingLabel5"
                    multiple
                    data-no-choices-text="No choices available"
                    data-item-select-text="Select this item"
                    data-close-after-select="true">
                    <option selected>Piet</option>
                    <option>Klaas</option>
                    <option>Jan</option>
                </select>
            </div>
        </div>
    </div>
</form>

With placeholder

This example shows a placeholder in the search box.

<form>
    <div class="form-group">
        <div class="chip-selector-container">
            <div class="floating-label">
                <label for="exampleSelectFloatingLabel6">Select Floating label</label>
                <select class="form-control" id="exampleSelectFloatingLabel6"
                    multiple
                    data-no-choices-text="No choices available"
                    data-item-select-text="Select this item"
                    data-close-after-select="true"
                    data-placeholder="Search for name">
                    <option value="klaas">Klaas</option>
                    <option value="jan">Jan</option>
                </select>
            </div>
        </div>
    </div>
</form>

Multiple rows

This example shows the behaviour when many options have been selected. The input field will be adjusted to a maximum of two rows, where after scrolling can be used to navigate to other rows.

Select Floating label

<form>
    <div class="form-group">
        <div class="chip-selector-container">
            <div class="floating-label">
                <label for="exampleSelectFloatingLabel6">Select Floating label</label>
                <select class="form-control" id="exampleSelectFloatingLabel6"
                    multiple
                    data-no-choices-text="No choices available"
                    data-item-select-text="Select this item"
                    data-close-after-select="true"
                    data-placeholder="Search for name">
                    <option selected>Name A</option>
                    <option selected>Name B</option>
                    <option selected>Name C</option>
                    <option selected>Name D</option>
                    <option selected>Name E</option>
                    <option selected>Name F</option>
                    <option selected>Name G</option>
                    <option selected>Name H</option>
                    <option selected>Name I</option>
                    <option selected>Name J</option>
                    <option selected>Name K</option>
                    <option selected>Name L</option>
                    <option selected>Name M</option>
                    <option selected>Name N</option>
                    <option selected>Name O</option>
                    <option selected>Name P</option>
                    <option>Name Q</option>
                    <option>Name R</option>
                    <option>Name S</option>
                    <option>Name T</option>
                    <option>Name U</option>
                    <option>Name V</option>
                    <option>Name W</option>
                    <option>Name X</option>
                    <option>Name Y</option>
                    <option>Name Z</option>
                </select>
            </div>
        </div>
    </div>
</form>

Checkboxes

<form>
    <div class="form-group">
        <div class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="checkbox">
            <label class="custom-control-label" for="checkbox">Check this checkbox</label>
        </div>
    </div>
</form>

Radios

<form>
    <div class="form-group">
        <div class="custom-control custom-radio">
            <input type="radio" id="radio1" name="radio" class="custom-control-input">
            <label class="custom-control-label" for="radio1">Toggle this radio</label>
        </div>
        <div class="custom-control custom-radio">
            <input type="radio" id="radio2" name="radio" class="custom-control-input">
            <label class="custom-control-label" for="radio2">Or toggle this other radio</label>
        </div>
    </div>
</form>

Text Field with Leading and Trailing Icons

<form>
    <div class="form-group">
        <div class="floating-label form-field--with-leading-icon form-field--with-trailing-icon">
            <label for="exampleInputFloatingLabel7">Search</label>
            <input class="form-control" id="exampleInputFloatingLabel7" type="search" value="">
            <i class="material-icons-round">search</i>
            <a href="/" class="material-icons-round close-search-box">close</a>
        </div>
    </div>
</form>

Textfield
Select
Multiple Select
Checkboxes
Radios
Text Field with Leading and Trailing Icons