Text input

<div class="t1"> <input type="text" class="t1 u1.input u1.input-m" placeholder="Placeholder" value=""> </div> <div class="t1 mt-8"> <input type="text" class="t1 u1.input u1.input-m" placeholder="Placeholder" value="Value"> </div>

<input type="text" class="t1 u1.input u1.input-m flex w-full" placeholder="Placeholder" value="">

<div class="t1 flex flex-col @/+mt-8"> <input type="text" class="t1 u1.input u1.input-xs" placeholder="Placeholder" value=""> <input type="text" class="t1 u1.input u1.input-s" placeholder="Placeholder" value=""> <input type="text" class="t1 u1.input u1.input-m" placeholder="Placeholder" value=""> <input type="text" class="t1 u1.input u1.input-l" placeholder="Placeholder" value=""> <input type="text" class="t1 u1.input u1.input-xl" placeholder="Placeholder" value=""> </div>

<div class="t1 flex flex-col @/+mt-8"> <input type="text" class="t1 u1.input u1.input-m" placeholder="default placeholder" value=""> <input type="text" class="t1 u1.input u1.input-m" placeholder="" value="default value"> <input type="text" class="t1 mode-valid u1.input u1.input-m" placeholder="mode-valid placeholder" value=""> <input type="text" class="t1 mode-valid u1.input u1.input-m" placeholder="" value="mode-valid value"> <input type="text" class="t1 mode-invalid u1.input u1.input-m" placeholder="mode-invalid placeholder" value=""> <input type="text" class="t1 mode-invalid u1.input u1.input-m" placeholder="" value="mode-invalid value"> <input type="text" class="t1 u1.input u1.input-m" placeholder="disabled placeholder" value="" disabled> <input type="text" class="t1 u1.input u1.input-m" placeholder="" value="disabled value" disabled> </div>

<div class="t1 flex relative"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-left" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-s-left" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-s-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-m-left" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-m-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-l-left" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-l-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-xl-left" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-xl-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-32"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-left mode-valid" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-left mode-invalid" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> <div class="t1 flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-left" placeholder="Placeholder" value="" disabled> <div class="t1 u1.input-icon-container-left"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div>

<div class="t1 flex"> <div class="t1 inline-flex relative"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-right" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-s-right" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-s-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-m-right" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-m-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-l-right" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-l-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-xl-right" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-xl-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-32"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-right mode-valid" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-right mode-invalid" placeholder="Placeholder" value=""> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div> <div class="t1 flex"> <div class="t1 inline-flex relative mt-8"> <input type="text" class="t1 u1.input u1.input-with-icon-xs-right" placeholder="Placeholder" value="" disabled> <div class="t1 u1.input-icon-container-right"> <svg class="t1 u1.input-icon-svg u1.input-icon-xs-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </div> </div> </div>