<!-- 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 -->
<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>
<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>
<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 -->
<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 -->
<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>
<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>
<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>
<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>
<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>
<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 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>
<a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
<span>in</span>
Testing site
</a>
<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>
<a href="#" class="pow-color-primary pow-flex-fit pow-max-line-1" title="Testing site">
<span>in</span>
Testing site
</a>
<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>
<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>