About
Forms
Forms description
Input text - label inside
ready
		<!-- INPUT TEXT -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="text" name="test1" id="test1" placeholder="placeholder">
        <label for="test1">Text classic</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - ERROR -->
<div class="pow-control-container">
    <div class="pow-control-input error">
        <input type="text" name="test2" id="test2" placeholder="placeholder">
        <label for="test2">Error</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - SUCCESS -->
<div class="pow-control-container">
    <div class="pow-control-input success">
        <input type="text" name="test3" id="test3" placeholder="placeholder">
        <label for="test3">Success</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - WARNING -->
<div class="pow-control-container">
    <div class="pow-control-input warning">
        <input type="text" name="test4" id="test4" placeholder="placeholder">
        <label for="test4">Warning</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - REQUIRED -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="text" name="test5" id="test5" placeholder="placeholder" required>
        <label for="test5">Required</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - DISABLED -->
<div class="pow-control-container" id="master">
    <div class="pow-control-input">
        <input type="text" name="test6" id="test6" placeholder="placeholder" disabled>
        <label for="test6">Disabled</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - READONLY -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="text" name="test7" id="test7" placeholder="placeholder" readonly>
        <label for="test7">Readonly</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

		
Input text - label outside
ready
		<!-- INPUT TEXT -->
<div class="pow-control-container">
    <div class="pow-control-input-outside">
        <input type="text" name="test1" id="test1" placeholder="placeholder">
        <label for="test1">Text classic</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - ERROR -->
<div class="pow-control-container">
    <div class="pow-control-input-outside error">
        <input type="text" name="test2" id="test2" placeholder="placeholder">
        <label for="test2">Error</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - SUCCESS -->
<div class="pow-control-container">
    <div class="pow-control-input-outside success">
        <input type="text" name="test3" id="test3" placeholder="placeholder">
        <label for="test3">Success</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - WARNING -->
<div class="pow-control-container">
    <div class="pow-control-input-outside warning">
        <input type="text" name="test4" id="test4" placeholder="placeholder">
        <label for="test4">Warning</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - REQUIRED -->
<div class="pow-control-container">
    <div class="pow-control-input-outside">
        <input type="text" name="test5" id="test5" placeholder="placeholder" required>
        <label for="test5">Required</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - DISABLED -->
<div class="pow-control-container" id="master">
    <div class="pow-control-input-outside">
        <input type="text" name="test6" id="test6" placeholder="placeholder" disabled>
        <label for="test6">Disabled</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT TEXT - READONLY -->
<div class="pow-control-container">
    <div class="pow-control-input-outside">
        <input type="text" name="test7" id="test7" placeholder="placeholder" readonly>
        <label for="test7">Readonly</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

		
Textarea - label inside
ready
		<div class="pow-control-container">
    <div class="pow-control-textarea">
        <textarea name="textarea1" id="textarea1" rows="5" placeholder="placeholder"></textarea>
        <label for="textarea1">Textarea label</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>
		
Textarea - label outside
ready
		<div class="pow-control-container">
    <div class="pow-control-textarea-outside">
        <textarea name="textarea1" id="textarea1" rows="5" placeholder="placeholder"></textarea>
        <label for="textarea1">Textarea label</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>
		
Input checkbox
ready
		<!-- INPUT CHECKBOX -->
<div class="pow-control-container">
    <span class="pow-control-label pow-margin-bottom-sm">Checkbox</span>
    <div class="pow-control-checkbox pow-margin-bottom-sm">
        <input type="checkbox" id="test19">
        <label for="test19">checkbox 1</label>
    </div>
    <div class="pow-control-checkbox pow-margin-bottom-sm">
        <input type="checkbox" id="test20" disabled>
        <label for="test20">checkbox 2</label>
    </div>
    <div class="pow-control-checkbox pow-margin-bottom-sm">
        <input type="checkbox" id="test21">
        <label for="test21">checkbox 3</label>
    </div>
</div>

<br /><br />

<!-- INPUT CHECKBOX INLINE -->
<div class="pow-control-container">
    <span class="pow-control-label pow-margin-bottom-sm">Checkbox inline</span>
    <div class="row">
        <div class="pow-control-checkbox pow-margin-bottom-sm col--3 col-xs-12">
            <input type="checkbox" id="test19bis">
            <label for="test19bis">checkbox 1</label>
        </div>
        <div class="pow-control-checkbox pow-margin-bottom-sm col--3 col-xs-12">
            <input type="checkbox" id="test20bis" disabled>
            <label for="test20bis">checkbox 2</label>
        </div>
        <div class="pow-control-checkbox pow-margin-bottom-sm col--3 col-xs-12">
            <input type="checkbox" id="test21bis">
            <label for="test21bis">checkbox 3</label>
        </div>
    </div>
</div>
		
Input radio
ready
		<!-- INPUT RADIO -->
<div class="pow-control-container">
    <span class="pow-control-label pow-margin-bottom-sm">Radio label</span>
    <div class="pow-control-radio pow-margin-bottom-sm">
        <input type="radio" name="radio-test" id="test13" value="radio1">
        <label for="test13">
            <span>Radio 1</span>
        </label>
    </div>
    <div class="pow-control-radio pow-margin-bottom-sm">
        <input type="radio" name="radio-test" id="test14" value="radio2">
        <label for="test14">
            <span>Radio 2</span>
        </label>
    </div>
    <div class="pow-control-radio pow-margin-bottom-sm">
        <input type="radio" name="radio-test" id="test15" value="radio3">
        <label for="test15">
            <span>Radio 3</span>
        </label>
    </div>
</div>

<br /><br />

<!-- INPUT RADIO INLINE -->
<div class="pow-control-container">
    <span class="pow-control-label pow-margin-bottom-sm">Radio inline</span>
    <div class="row">
        <div class="pow-control-radio pow-margin-bottom-sm col--3 col-xs-12">
            <input type="radio" name="radio-test-inline" id="test16" value="radio1">
            <label for="test16">
                <span>Radio 1</span>
            </label>
        </div>
        <div class="pow-control-radio pow-margin-bottom-sm col--3 col-xs-12">
            <input type="radio" name="radio-test-inline" id="test17" value="radio2" disabled>
            <label for="test17">
                <span>Radio 2</span>
            </label>
        </div>
        <div class="pow-control-radio pow-margin-bottom-sm col--3 col-xs-12">
            <input type="radio" name="radio-test-inline" id="test18" value="radio3">
            <label for="test18">
                <span>Radio 3</span>
            </label>
        </div>
    </div>
</div>
		
Select - label inside
ready
		<div class="pow-control-container">
    <div class="pow-control-select">
        <select name="select" id="select1">
            <option value="1">option1</option>
            <option value="2">option2</option>
            <option value="3">option3</option>
            <option value="4">option4</option>
            <option value="5">option5</option>
            <option value="6">option6</option>
            <option value="7">option7</option>
        </select>
        <label for="select1">True select</label>
    </div>
</div>

<div class="pow-control-container">
    <div class="pow-control-select">
        <select name="select" id="select2">
            <option disabled selected value="">Choose an option</option>
            <option value="1">option1</option>
            <option value="2">option2</option>
            <option value="3">option3</option>
            <option value="4">option4</option>
            <option value="5">option5</option>
            <option value="6">option6</option>
            <option value="7">option7</option>
        </select>
        <label for="select2">True select</label>
    </div>
</div>

<div id="master">
    <div class="pow-control-container">
        <div class="pow-control-select">
            <select name="select" id="select3" disabled>
                <option value="1">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
                <option value="4">option4</option>
                <option value="5">option5</option>
                <option value="6">option6</option>
                <option value="7">option7</option>
            </select>
            <label for="select3">Select disabled</label>
        </div>
    </div>
</div>
		
Select - label outside
ready
		<div class="pow-control-container">
    <div class="pow-control-select-outside">
        <div class="pow-control-select-no-label">
            <select name="select" id="select1">
                <option value="1">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
                <option value="4">option4</option>
                <option value="5">option5</option>
                <option value="6">option6</option>
                <option value="7">option7</option>
            </select>
        </div>
        <label for="select1">True select</label>
    </div>
</div>

<div class="pow-control-container">
    <div class="pow-control-select-outside">
        <div class="pow-control-select-no-label">
            <select name="select" id="select2">
                <option disabled selected value="">Choose an option</option>
                <option value="1">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
                <option value="4">option4</option>
                <option value="5">option5</option>
                <option value="6">option6</option>
                <option value="7">option7</option>
            </select>
        </div>
        <label for="select2">True select</label>
    </div>
</div>

<div id="master">
    <div class="pow-control-container">
        <div class="pow-control-select-outside">
            <div class="pow-control-select-no-label">
                <select name="select" id="select3" disabled>
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                    <option value="3">option3</option>
                    <option value="4">option4</option>
                    <option value="5">option5</option>
                    <option value="6">option6</option>
                    <option value="7">option7</option>
                </select>
            </div>
            <label for="select3">Select disabled</label>
        </div>
    </div>
</div>
		
Switch
ready
		<div class="pow-control-container">
    <span class="pow-control-label pow-margin-bottom-sm">Switch</span>
    <div class="pow-control-switch pow-margin-bottom-sm">
        <input type="checkbox" id="cb1">
        <label for="cb1">
            <span class="on">Yes</span>
            <span class="off">No</span>
        </label>
    </div>
    <div class="pow-control-switch pow-margin-bottom-sm">
        <input type="checkbox" id="cb2" disabled>
        <label for="cb2">
            <span class="on">Yes</span>
            <span class="off">No</span>
        </label>
    </div>
</div>
		
Input type file
ready
		<div class="pow-control-container">
    <span class="pow-control-label pow-margin-bottom-sm">Upload</span>
    <div class="pow-control-file pow-margin-bottom-sm" file-drop>
        <input type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple="">
        <label for="file">
            <span class="label-wrapper pow-flexbox pow-flex-column pow-flex-nowrap pow-flex-align-items-center">
                <span class="pow-font-light">Drago and drop</span>
                <span>or <span class="pow-font-bold">browse</span></span>
            </span>
        </label>

        <div class="pow-files-progress">
            <div class="pow-file-progress success">
                <span class="pow-file-progress-name">File name</span>
                <span class="pow-file-progress-bar">
                    <span class="pow-file-progress-current"></span>
                </span>
                <button type="button" class="pow-action pow-action-xs icon-size-xs icon-check1 pow-tooltip-ref">
                    <span class="pow-tooltip open-top size-xs">Remove</span>
                </button>
            </div>
        </div>
    </div>
</div>
		
Progress file
ready
		<div class="pow-files-progress">
    <div class="pow-file-progress pending">
        <span class="pow-file-progress-name">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
        <span class="pow-file-progress-bar">
            <span class="pow-file-progress-current"></span>
        </span>
    </div>
    <div class="pow-file-progress success">
        <span class="pow-file-progress-name">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
        <span class="pow-file-progress-bar">
            <span class="pow-file-progress-current"></span>
        </span>
        <button type="button" class="pow-action pow-action-xs icon-size-xs icon-check1 pow-tooltip-ref">
            <span class="pow-tooltip open-top size-xs">Action</span>
        </button>
    </div>
    <div class="pow-file-progress error">
        <span class="pow-file-progress-name">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
        <span class="pow-file-progress-bar">
            <span class="pow-file-progress-current"></span>
        </span>
        <button type="button" class="pow-action pow-action-xs icon-size-xs icon-powell-close pow-tooltip-ref">
            <span class="pow-tooltip open-top size-xs">Action</span>
        </button>
    </div>
</div>
		
Input spec
ready
		<!-- INPUT EMAIL -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="email" name="test8" id="test8" placeholder="placeholder">
        <label for="test8">Email</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT DATE -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="date" name="test9" id="test9" placeholder="placeholder">
        <label for="test9">Date</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT DATEPICKER -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="text" name="test10" id="test10" date-time format="LL" view="date" min-View="date" max-View="date" is-open="true">
        <label for="test10">Date picker</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT NUMBER -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="number" name="test11" id="test11" placeholder="placeholder">
        <label for="test11">Number</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT PHONE -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="phone" name="test12" id="test12" placeholder="placeholder">
        <label for="test12">Phone</label>
    </div>
    <p class="pow-text-help">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et, dignissimos!</p>
</div>

<!-- INPUT WITH AUTOCOMPLETE  -->
<div class="pow-control-container">
    <div class="pow-control-input">
        <input type="text" name="testDropdown" id="testDropdown" placeholder="placeholder">
        <label for="testDropdown">Input with auto complete</label>
        <div class="pow-control-input-dropdown">
            <div class="pow-list-with-image">
                <div class="wrap">
                    <div class="grid-container-item no-gutters">
                        <div class="item pow-padding-sm pow-flexbox pow-flex-row pow-flex-nowrap item-size--1 pow-flex-align-items-center">
                            <div class="container-image pow-margin-right-sm pow-icon-container-xs pow-rounded pdf">
                            </div>
                            <div class="container-content pow-flex-fit pow-font-regular">
                                <a href="#" class="pow-heading-4 pow-max-line-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates numquam iure ducimus perferendis, laboriosam atque eius, aperiam placeat aliquam a quae obcaecati fugit. Laborum veniam laudantium hic dignissimos repellat qui!</a>
                                <div class="pow-flexbox pow-flex-row pow-flex-nowrap">
                                    <span class="pow-color-black400">Bernard Testing</span>&nbsp;
                                    <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
                                        <span>in</span>
                                        Testing site
                                    </a>&nbsp;
                                    <span class="pow-color-black pow-flex-align-right pow-font-light">01/23/2019</span>
                                </div>
                            </div>
                        </div>
                        <div class="item pow-padding-sm pow-flexbox pow-flex-row pow-flex-nowrap item-size--1 pow-flex-align-items-center">
                            <div class="container-image pow-margin-right-sm pow-icon-container-xs pow-rounded pdf">
                            </div>
                            <div class="container-content pow-flex-fit pow-font-regular">
                                <a href="#" class="pow-heading-4 pow-max-line-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates numquam iure ducimus perferendis, laboriosam atque eius, aperiam placeat aliquam a quae obcaecati fugit. Laborum veniam laudantium hic dignissimos repellat qui!</a>
                                <div class="pow-flexbox pow-flex-row pow-flex-nowrap">
                                    <span class="pow-color-black400">Bernard Testing</span>&nbsp;
                                    <a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
                                        <span>in</span>
                                        Testing site
                                    </a>&nbsp;
                                    <span class="pow-color-black pow-flex-align-right pow-font-light">01/23/2019</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
		
Multi level form
ready
		<div class="pow-form-level1">
    <div class="pow-control-container">
        <span class="pow-control-label pow-margin-bottom-sm">Checkbox</span>
        <div class="pow-control-checkbox pow-margin-bottom-sm">
            <input type="checkbox" id="test24">
            <label for="test24">checkbox 1</label>
        </div>
    </div>
    <div class="pow-form-level2">
        <div class="pow-control-container">
            <span class="pow-heading-5 pow-margin-bottom-sm">Checkbox</span>
            <div class="pow-control-checkbox pow-margin-bottom-sm">
                <input type="checkbox" id="test25">
                <label for="test25">checkbox 1</label>
            </div>
            <div class="pow-control-checkbox pow-margin-bottom-sm">
                <input type="checkbox" id="test26" disabled>
                <label for="test26">checkbox 2</label>
            </div>
            <div class="pow-form-level3">
                <div class="pow-control-container">
                    <span class="pow-heading-5 pow-margin-bottom-sm">Checkbox</span>
                    <div class="pow-control-checkbox pow-margin-bottom-sm">
                        <input type="checkbox" id="test28">
                        <label for="test28">checkbox 1</label>
                    </div>
                </div>
            </div>
            <div class="pow-control-checkbox pow-margin-bottom-sm">
                <input type="checkbox" id="test27">
                <label for="test27">checkbox 3</label>
            </div>
        </div>
        <div class="pow-control-container">
            <span class="pow-heading-5 pow-margin-bottom-sm">Checkbox</span>
            <div class="pow-control-checkbox pow-margin-bottom-sm">
                <input type="checkbox" id="test28">
                <label for="test28">checkbox 1</label>
            </div>
        </div>
    </div>
</div>