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">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">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>

Symfony Forms

When the LeviyUserInterfaceBundle is enabled, it is possible to use forms created with the Symfony Form component. Floating labels, custom checkboxes and radio buttons will automatically be enabled.

Buttons should be added to the templates, and not to the form classes. So to render a form with buttons, use the following code in your Twig template:

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ form_start(form) }}
{{ form_widget(form) }}

{{ buttons.link('Cancel', '', '#') }}
{{ buttons.button('Save', 'primary', 'submit') }}
{{ form_end(form) }}

Validation

When a submitted form contains validation errors, the input elements are marked as invalid and error messages are shown under them:

Form errors

There can also be errors with the submitted form as a whole, instead of with individual input elements:

Forms with trailing icons

Form inputs can also contain trailing icons. See the example below on how to use this. In the FormType class, you can add the key trailing_icon with the icon you want to use within the input. See here for the available icons.

$builder
    ->add(
        'username',
        TextType::class,
        [
            'trailing_icon' => 'people',
        ]
    )
    ->add(
        'email_address',
        EmailType::class,
        [
            'trailing_icon' => 'mail',
        ]
    );

Forms within a Alert Dialog

You can also put a form inside an Alert Dialog. If you want, you can also add a delay to the submit button. For example, a delete form that deletes important data, can have a delay of 2000ms to the submit button for extra safety.

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ form_start(form, {'attr': {
    'data-alert-dialog-title': 'Delete all files from this user?',
    'data-alert-dialog-body': 'This will permanently delete these files from Leviy. Warning: this cannot be undone!',
    'data-alert-dialog-dismiss': 'Cancel',
    'data-alert-dialog-confirm': 'Delete all',
    'data-alert-dialog-confirmation-delay': true
}}) }}

{{ buttons.button('Open Modal', 'primary', 'submit') }}

{{ form_end(form) }}

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