Input

Inputs are used to take data from the users, mostly by forms. The input element is the most important form element. The input element can be displayed in several ways, depending on the type attribute like text, radio, checkbox etc. You can also disabled them by using appropriate classes

Input Fields along with Error Styles

Various input fields variants can be used by adding the class names as .input-primary, .input-error .input-disabled.

Username* Username*

*This username does not exist

Copy
        <label class="input-label">Username*</label>
        <input type="text" class="input-primary space-S"/>

        <label class="input-label">Username*</label>
        <input type="text" class="input-error space-S"/>
        <div class="error-text"><span>*This username does not exist</span></div>

        <label class="input-label">Email</label>
        <input type="text" class="input-disabled space-S" placeholder="This is disabled field" disabled/>

Radio Buttons

Radio buttons allow the user to select one option from a set. Use the .input-radio and .input-radio-disabled to get pre-styled Radio buttons.

Checked

Unchecked

Disabled

Copy
        <!-- Using 'radio' class for the outside div, containing input and label -->
        <div class="radio space-S">
            <label class="input-label centered-flex-row-container" for="input-radio">
                <input class="input-radio" name="radio" type="radio" checked>
                Checked
            </label>
        </div>

        <div class="radio space-S">
            <label class="input-label centered-flex-row-container" for="input-radio">
                <input class="input-radio" name="radio" type="radio">
                Unchecked   
            </label>
        </div>

        <div class="radio space-S">
            <label class="input-label centered-flex-row-container" for="input-radio-disabled">
                <input class="input-radio input-radio-disabled" name="radio" type="radio" disabled>
                Disabled
            </label>
        </div>

Checkbox Button

Checkboxes allow the user to select one or more option from all given options. Checkboxes can be used to turn an option on or off. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead. You can use .input-checkbox and .input-checkbox-disabled to get pre-styled checkbox buttons.

Checked

Unchecked

Disabled

Copy
        <!-- Using 'checkbox' class for the outside div, containing input and label -->
        <div class="checkbox space-S">
            <label class="input-label centered-flex-row-container" for="input-checkbox">
                <input class="input-checkbox" name="radio" type="checkbox" checked>
                Checked
            </label>
        </div>

        <div class="checkbox space-S">
            <label class="input-label centered-flex-row-container" for="input-checkbox">
                <input class="input-checkbox" name="radio" type="checkbox">
                Unchecked   
            </label>
        </div>

        <div class="checkbox space-S">
            <label class="input-label centered-flex-row-container" for="input-checkbox-disabled">
                <input class="input-checkbox input-checkbox-disabled" name="radio" type="checkbox" disabled>
                Disabled
            </label>
        </div>