@travlrcom/uikit

<!DOCTYPE html> <html lang="en"> <head> <base href="/"> <meta charset="utf-8"/> <meta name="theme-color" content="#006272"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="robots" content="index, follow"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="canonical" href="/"> <link rel="manifest" href="manifest.json"> <title>Text Input - TRAVLR UI Kit</title> <meta name="description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff.">  <meta property="og:title" content="TRAVLR UI Kit"> <meta property="og:description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff."> <meta property="og:type" content="website" /> <meta property="og:url" content="Travlr Facebook Url"> <meta property="og:image" content="Travlr Facebook Image"> <meta property="fb:app_id" content="FACEBOOK_APP_ID" /> <meta property="og:site_name" content="TRAVLR UI Kit=">  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="Travlr Twitter Account" /> <meta name="twitter:title" content="TRAVLR UI Kit"> <meta name="twitter:description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff."> <meta property="twitter:image" content="Travlr Twitter Image">  <link rel="shortcut icon" href="">  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>  </head> <body class="travlr-ui"> <div id="app">  <%= require('html-loader!./../components/header.html') %>   <main class="t-main-content">  <section class=" t-section-small"> <div class="t-container"> <div class="t-columns t-columns-with-gap"> <div class="t-col-12"> <ul class="t-breadcrumb"> <li class="t-breadcrumb-item active"> <a href="/">Home</a> </li> <li class="t-breadcrumb-item active"> <a href="/documentations.html">Documentations</a> </li> <li class="t-breadcrumb-item disabled"> <a href="#">Text Input</a> </li> </ul> </div> </div> </div> </section>   <section class="t-p-b-32"> <div class="t-container"> <div class="t-columns t-columns-with-gap">  <%= require('html-loader!./../components/sidebar-documentation.html') %>   <div class="t-col-8 t-col-mobile-12"> <div class="t-box t-box-with-shadow">  <h2 class="t-heading-4 t-color-grey-darkest">Text Input</h2> <p class="t-body-text t-m-t-10 t-m-b-20"> An input is a field used to elicit a response from a user </p> <div class="t-columns t-columns-with-gap t-m-t-24"> <div class="t-col-12 t-col-mobile-12"> <h3 class="t-heading-5 t-color-grey-darkest">Variants size input</h3> <p class="t-body-text t-m-t-10 t-m-b-5"> There're 3 variants of textbox, its : <strong>small</strong>, <strong>medium</strong>, <strong>large</strong> </p> <p class="t-body-text t-m-b-5"> Here is the way to choose one of them, just put class like <span class="t-label-code">-small</span>, <span class="t-label-code">-medium</span>, <span class="t-label-code">-large</span> part on the class. You only have to choose one. </p> <p class="t-body-text t-m-b-5"> As default we dont put <span class="t-label-code">-medium</span> class for medium variant size. </p> <p class="t-body-text t-m-b-5"> Or you can put <span class="t-label-code">-medium</span> class to make sure you choose medium variant size for textbox. </p> <h3 class="t-heading-5 t-m-t-30 t-color-grey-darkest">Style input</h3> <p class="t-body-text t-m-t-10 t-m-b-5"> There're 2 variant styles of textbox, its : <strong>-text</strong> and <strong>-tinted</strong>. <strong>Text</strong> style is mean, all of component form is white background, and then <strong>Tinted</strong> is mean grey background. </p> <p class="t-body-text t-m-t-10 t-m-b-30"> For example : use this class to choose Text or Tinted style : <span class="t-label-code">.t-input-text</span> or <span class="t-label-code">.t-input-text-tinted</span> </p> <form class="t-form t-m-t-10"> <div class="t-input-group"> <label class="t-input-label"> Small input </label> <input type="text" placeholder="Placeholder" class="t-input-text t-input-text-small"> </div> <div class="t-input-group"> <label class="t-input-label"> Medium input </label> <input type="text" placeholder="Placeholder" class="t-input-text t-input-text-medium"> </div> <div class="t-input-group"> <label class="t-input-label"> Large input </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-large"> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInputSize"> <form class="t-form"> <div class="t-input-group"> <label class="t-input-label"> Small input </label> <input type="text" placeholder="Placeholder" class="t-input-text t-input-text-small"> </div> <div class="t-input-group"> <label class="t-input-label"> Medium input </label> <input type="text" placeholder="Placeholder" class="t-input-text t-input-text-medium"> </div> <div class="t-input-group"> <label class="t-input-label"> Large input </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-large"> </div> </form> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInputSize" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-b-20"></div> <div class="t-separator t-m-t-32 t-m-b-32"></div> <div class="t-m-b-20"></div> <h3 class="t-heading-5 t-color-grey-darkest">Textbox</h3> <p class="t-body-text t-m-t-10 t-m-b-10"> These some examples of textboxes we provide. </p> <p class="t-body-text t-m-t-10 t-m-b-20"> <strong>*Notes :</strong> before you create an element form, you have to wrapped it using form class, like this <span class="t-label-code"><form class="t-form"></span> so, you can put some elements inside form tag. </p> <form class="t-form"> <div class="t-input-group"> <label class="t-input-label"> Standard </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-standard"> <div class="t-input-group"> <label class="t-input-label"> Standard </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-standard" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group"> <label class="t-input-label"> Required <span class="t-color-danger"> * </span> </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-required"> <div class="t-input-group"> <label class="t-input-label"> Required <span class="t-color-danger"> * </span> </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-required" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group"> <label class="t-input-label"> Disabled </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium" disabled> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-disabled"> <div class="t-input-group"> <label class="t-input-label"> Disabled </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium" disabled> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-disabled" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> Clearable </label> <div class="t-input-icon-group"> <button class="t-input-icon-right t-icon icon-close-circle"></button> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-right t-input-text-tinted-medium"> </div> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-clearable"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> Clearable </label> <div class="t-input-icon-group"> <button class="t-input-icon-right t-icon icon-close-circle"></button> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-right t-input-text-tinted-medium"> </div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-clearable" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> With icon on left </label> <div class="t-input-icon-group"> <span class="t-input-icon-left t-icon icon-search"></span> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-left t-input-text-tinted-medium"> </div> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-withiconleft"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> With icon on left </label> <div class="t-input-icon-group"> <span class="t-input-icon-left t-icon icon-search"></span> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-left t-input-text-tinted-medium"> </div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-withiconleft" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> With icon on right </label> <div class="t-input-icon-group"> <span class="t-input-icon-right t-icon icon-search"></span> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-right t-input-text-tinted-medium"> </div> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-withiconright"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> With icon on right </label> <div class="t-input-icon-group"> <span class="t-input-icon-right t-icon icon-search"></span> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-right t-input-text-tinted-medium"> </div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-withiconright" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> Loading </label> <div class="t-input-icon-group"> <span class="t-input-icon-right t-icon icon-spinner-1"></span> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-right t-input-text-tinted-medium"> </div> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-loading"> <div class="t-input-group t-input-group-with-icon"> <label class="t-input-label"> Loading </label> <div class="t-input-icon-group"> <span class="t-input-icon-right t-icon icon-spinner-1"></span> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-right t-input-text-tinted-medium"> </div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-loading" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group has-error"> <label for="error-field" class="t-input-label"> Error <span class="t-color-danger"> * </span> </label> <input id="error-field" type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> <span class="t-input-validation"> The company field is required. </span> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-error"> <div class="t-input-group has-error"> <label for="error-field" class="t-input-label"> Error <span class="t-color-danger"> * </span> </label> <input id="error-field" type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> <span class="t-input-validation"> The company field is required. </span> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-error" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group"> <label class="t-input-label"> With message </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> <span class="t-input-message"> We’ll never share your email with anyone else </span> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-withmessage"> <div class="t-input-group"> <label class="t-input-label"> With message </label> <input type="text" placeholder="Placeholder" class="t-input-text-tinted t-input-text-tinted-medium"> <span class="t-input-message"> We’ll never share your email with anyone else </span> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-withmessage" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-40"></div> <form class="t-form"> <div class="t-input-group"> <label class="t-input-label"> Textarea </label> <textarea placeholder="Placeholder" rows="5" class="t-input-textarea-tinted"></textarea> </div> </form> <div class="t-m-t-20"></div> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Source code </div> </div> <div class="t-panel-body active"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="uiInput-textarea"> <div class="t-input-group"> <label class="t-input-label"> Textarea </label> <textarea placeholder="Placeholder" rows="5" class="t-input-textarea-tinted"></textarea> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#uiInput-textarea" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> </div> </div> <div class="t-m-b-20"></div> <%= require('html-loader!./../components/footer-documentation.html') %> </div> </div>  </div> </div> </section>  </main>   <%= require('html-loader!./../components/footer.html') %>  </div> <style> code { white-space: pre-wrap } </style>  <script> function statusToggle() { if (document.getElementById('status').checked) { document.getElementById("status-text").innerHTML = "Toggle On"; } else{ document.getElementById("status-text").innerHTML = "Toggle Off"; } } </script>  <%= require('html-loader!./../components/footer-script.html') %>  </body> </html>