Forms

Forms component that include inputs, selects and textareas.

Common inputs

Select, textarera, input types: text, search, tel, color, date, email, url, file, number, password, reset, submit, button, image

<div class="my-form">
    <select id="common-input-select">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select">Select label</label>
</div>
<div class="my-form">
    <select id="common-input-select-disabled" disabled="">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-disabled">Select label disabled</label>
</div>
<div class="my-form">
    <textarea id="common-input-textarea">Textarea</textarea>
</div>
<div class="my-form">
    <textarea id="common-input-textarea-disabled" disabled="">Textarea disabled</textarea>
    <label for="common-input-select-disabled">Textarea disabled label</label>
</div>
<div class="my-form">
    <input type="text" id="common-input-text">
    <label for="common-input-text">Type text label</label>
</div>
<div class="my-form">
    <input type="text" id="common-input-text-disabled" disabled="">
    <label for="common-input-text-disabled">Type text disabled label</label>
</div>
<div class="my-form">
    <input type="search" id="common-input-search">
    <label for="common-input-search">Type search label</label>
</div>
<div class="my-form">
    <input type="search" id="common-input-search-disabled" disabled="">
    <label for="common-input-search-disabled">Type search disabled label</label>
</div>
<div class="my-form">
    <input type="tel" id="common-input-tel">
    <label for="common-input-tel">Type tel label</label>
</div>
<div class="my-form">
    <input type="tel" id="common-input-tel-disabled" disabled="">
    <label for="common-input-tel-disabled">Type tel disabled label</label>
</div>
<div class="my-form">
    <input type="color" id="common-input-color">
    <label for="common-input-color">Type color label</label>
</div>
<div class="my-form">
    <input type="color" id="common-input-color-disabled" disabled="">
    <label for="common-input-color-disabled">Type color disabled label</label>
</div>
<div class="my-form">
    <input type="date" id="common-input-date">
    <label for="common-input-date">Type date label</label>
</div>
<div class="my-form">
    <input type="date" id="common-input-date-disabled" disabled="">
    <label for="common-input-date-disabled">Type date disabled label</label>
</div>
<div class="my-form">
    <input type="email" id="common-input-email">
    <label for="common-input-email">Type email label</label>
</div>
<div class="my-form">
    <input type="email" id="common-input-email-disabled" disabled="">
    <label for="common-input-email-disabled">Type email disabled label</label>
</div>
<div class="my-form">
    <input type="url" id="common-input-url">
    <label for="common-input-url">Type url label</label>
</div>
<div class="my-form">
    <input type="url" id="common-input-url-disabled" disabled="">
    <label for="common-input-url-disabled">Type url disabled label</label>
</div>
<div class="my-form">
    <input type="file" id="common-input-file">
    <label for="common-input-file">Type file label</label>
</div>
<div class="my-form">
    <input type="file" id="common-input-file-disabled" disabled="">
    <label for="common-input-file-disabled">Type file disabled label</label>
</div>
<div class="my-form">
    <input type="number" id="common-input-number">
    <label for="common-input-number">Type number label</label>
</div>
<div class="my-form">
    <input type="number" id="common-input-number-disabled" disabled="">
    <label for="common-input-number-disabled">Type number disabled label</label>
</div>
<div class="my-form">
    <input type="password" id="common-input-password">
    <label for="common-input-password">Type password label</label>
</div>
<div class="my-form">
    <input type="password" id="common-input-password-disabled" disabled="">
    <label for="common-input-password-disabled">Type password disabled label</label>
</div>
<div class="my-form">
    <input type="reset" id="common-input-reset">
    <label for="common-input-reset">Type reset label</label>
</div>
<div class="my-form">
    <input type="reset" id="common-input-reset-disabled" disabled="">
    <label for="common-input-reset-disabled">Type reset disabled label</label>
</div>
<div class="my-form">
    <input type="submit" id="common-input-submit">
    <label for="common-input-submit">Type submit label</label>
</div>
<div class="my-form">
    <input type="submit" id="common-input-submit-disabled" disabled="">
    <label for="common-input-submit-disabled">Type submit disabled label</label>
</div>
<div class="my-form">
    <input type="button" id="common-input-button">
    <label for="common-input-button">Type button label</label>
</div>
<div class="my-form">
    <input type="button" id="common-input-button-disabled" disabled="">
    <label for="common-input-button-disabled">Type button disabled label</label>
</div>
<div class="my-form">
    <input type="image" id="common-input-image">
    <label for="common-input-image">Type image label</label>
</div>
<div class="my-form">
    <input type="image" id="common-input-image-disabled" disabled="">
    <label for="common-input-image-disabled">Type image disabled label</label>
</div>

<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>

Common inputs modifiers

All the modifiers for common inputs

<div class="my-form mod-success">
    <select id="common-input-select-mod-success">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-mod-success">Select mod-success</label>
</div>
<div class="my-form mod-success">
    <select id="common-input-select-mod-success-disabled" disabled="">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-mod-success-disabled">Select mod-success disabled</label>
</div>
<div class="my-form mod-success">
    <textarea id="common-input-textarea-mod-success">Textarea mod-success</textarea>
    <label for="common-input-select-mod-success">Textarea mod-success</label>
</div>
<div class="my-form mod-success">
    <textarea id="common-input-textarea-mod-success-disabled" disabled="">Textarea mod-success disabled</textarea>
    <label for="common-input-select-mod-success-disabled">Textarea mod-success disabled</label>
</div>
<div class="my-form mod-success">
    <input type="text" id="common-input-mod-success">
    <label for="common-input-mod-success">Input text mod-success</label>
</div>
<div class="my-form mod-success">
    <input type="text" id="common-input-mod-success-disabled" disabled="">
    <label for="common-input-mod-success-disabled">Input text mod-success disabled</label>
</div>
<div class="my-form mod-warning">
    <select id="common-input-select-mod-warning">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-mod-warning">Select mod-warning</label>
</div>
<div class="my-form mod-warning">
    <select id="common-input-select-mod-warning-disabled" disabled="">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-mod-warning-disabled">Select mod-warning disabled</label>
</div>
<div class="my-form mod-warning">
    <textarea id="common-input-textarea-mod-warning">Textarea mod-warning</textarea>
    <label for="common-input-select-mod-warning">Textarea mod-warning</label>
</div>
<div class="my-form mod-warning">
    <textarea id="common-input-textarea-mod-warning-disabled" disabled="">Textarea mod-warning disabled</textarea>
    <label for="common-input-select-mod-warning-disabled">Textarea mod-warning disabled</label>
</div>
<div class="my-form mod-warning">
    <input type="text" id="common-input-mod-warning">
    <label for="common-input-mod-warning">Input text mod-warning</label>
</div>
<div class="my-form mod-warning">
    <input type="text" id="common-input-mod-warning-disabled" disabled="">
    <label for="common-input-mod-warning-disabled">Input text mod-warning disabled</label>
</div>
<div class="my-form mod-danger">
    <select id="common-input-select-mod-danger">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-mod-danger">Select mod-danger</label>
</div>
<div class="my-form mod-danger">
    <select id="common-input-select-mod-danger-disabled" disabled="">
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
    <label for="common-input-select-mod-danger-disabled">Select mod-danger disabled</label>
</div>
<div class="my-form mod-danger">
    <textarea id="common-input-textarea-mod-danger">Textarea mod-danger</textarea>
    <label for="common-input-select-mod-danger">Textarea mod-danger</label>
</div>
<div class="my-form mod-danger">
    <textarea id="common-input-textarea-mod-danger-disabled" disabled="">Textarea mod-danger disabled</textarea>
    <label for="common-input-select-mod-danger-disabled">Textarea mod-danger disabled</label>
</div>
<div class="my-form mod-danger">
    <input type="text" id="common-input-mod-danger">
    <label for="common-input-mod-danger">Input text mod-danger</label>
</div>
<div class="my-form mod-danger">
    <input type="text" id="common-input-mod-danger-disabled" disabled="">
    <label for="common-input-mod-danger-disabled">Input text mod-danger disabled</label>
</div>

<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>

Checkboxes

Checkboxes input types

<div class="my-form">
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">Checkbox 1 label</label>
</div>
<div class="my-form">
    <input type="checkbox" id="checkbox-2">
    <label for="checkbox-2">Checkbox 2 label</label>
</div>
<div class="my-form">
    <input type="checkbox" id="checkbox-3">
    <label for="checkbox-3">Checkbox 3 label</label>
</div>
<div class="my-form">
    <input type="checkbox" id="checkbox-disabled" disabled="">
    <label for="checkbox-disabled">Checkbox disabled label</label>
</div>
<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>

Checkboxes modifiers

Checkboxes modifiers

<div class="my-form mod-switch">
    <input type="checkbox" id="checkbox-1-mod-switch">
    <label for="checkbox-1-mod-switch">Checkbox 1 with mod-switch label</label>
</div>
<div class="my-form mod-switch">
    <input type="checkbox" id="checkbox-2-mod-switch">
    <label for="checkbox-2-mod-switch">Checkbox 2 with mod-switch label</label>
</div>
<div class="my-form mod-switch">
    <input type="checkbox" id="checkbox-3-mod-switch">
    <label for="checkbox-3-mod-switch">Checkbox 3 with mod-switch label</label>
</div>

<div class="my-form mod-group">
    <input type="checkbox" id="checkbox-1-mod-group">
    <label for="checkbox-1-mod-group">Checkbox 1 with mod-group label</label>
</div>
<div class="my-form mod-group">
    <input type="checkbox" id="checkbox-2-mod-group">
    <label for="checkbox-2-mod-group">Checkbox 2 with mod-group label</label>
</div>
<div class="my-form mod-group">
    <input type="checkbox" id="checkbox-3-mod-group">
    <label for="checkbox-3-mod-group">Checkbox 3 with mod-group label</label>
</div>
<div class="my-form mod-group">
    <input type="checkbox" id="checkbox-disabled-mod-group" disabled="">
    <label for="checkbox-disabled-mod-group">Checkbox disabled with mod-group label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="checkbox" id="checkbox-1-mod-group-alt">
    <label for="checkbox-1-mod-group-alt">Checkbox 1 with mod-group-alt label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="checkbox" id="checkbox-2-mod-group-alt">
    <label for="checkbox-2-mod-group-alt">Checkbox 2 with mod-group-alt label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="checkbox" id="checkbox-3-mod-group-alt">
    <label for="checkbox-3-mod-group-alt">Checkbox 3 with mod-group-alt label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="checkbox" id="checkbox-disabled-mod-group-alt" disabled="">
    <label for="checkbox-disabled-mod-group-alt">Checkbox disabled with mod-group-alt label</label>
</div>

<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>

Radios

Radios input types

<div class="my-form">
    <input type="radio" id="radio-1" name="radio">
    <label for="radio-1">Radio 1 label</label>
</div>
<div class="my-form">
    <input type="radio" id="radio-2" name="radio">
    <label for="radio-2">Radio 2 label</label>
</div>
<div class="my-form">
    <input type="radio" id="radio-3" name="radio">
    <label for="radio-3">Radio 3 label</label>
</div>
<div class="my-form">
    <input type="radio" id="radio-disabled" name="radio" disabled="">
    <label for="radio-disabled">Radio disabled label</label>
</div>
<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>

Radios modifiers

Radios modifiers

<div class="my-form mod-group">
    <input type="radio" id="radio-1-mod-group" name="radio-modifier">
    <label for="radio-1-mod-group">Radio 1 with mod-group label</label>
</div>
<div class="my-form mod-group">
    <input type="radio" id="radio-2-mod-group" name="radio-modifier">
    <label for="radio-2-mod-group">Radio 2 with mod-group label</label>
</div>
<div class="my-form mod-group">
    <input type="radio" id="radio-3-mod-group" name="radio-modifier">
    <label for="radio-3-mod-group">Radio 3 with mod-group label</label>
</div>
<div class="my-form mod-group">
    <input type="radio" id="radio-disabled-mod-group" name="radio-modifier" disabled="">
    <label for="radio-disabled-mod-group">Radio disabled with mod-group label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="radio" id="radio-1-mod-group-alt" name="radio-modifier">
    <label for="radio-1-mod-group-alt">Radio 1 with mod-group-alt label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="radio" id="radio-2-mod-group-alt" name="radio-modifier">
    <label for="radio-2-mod-group-alt">Radio 2 with mod-group-alt label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="radio" id="radio-3-mod-group-alt" name="radio-modifier">
    <label for="radio-3-mod-group-alt">Radio 3 with mod-group-alt label</label>
</div>
<div class="my-form mod-group-alt">
    <input type="radio" id="radio-disabled-mod-group-alt" name="radio-modifier" disabled="">
    <label for="radio-disabled-mod-group-alt">Radio disabled with mod-group-alt label</label>
</div>

<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>

Ranges

Input range types

<div class="my-form">
    <input type="range" id="range-1">
    <label for="range-1">Range label</label>
</div>
<div class="my-form">
    <input type="range" id="range-disabled" disabled="">
    <label for="range-disabled">Range disabled label</label>
</div>
<!-- DEMO ONLY -->
<style>body { padding: 20px }</style>