<%= require('html-loader!./../components/header.html') %>
<%= require('html-loader!./../components/sidebar-documentation.html') %>

Text Input

An input is a field used to elicit a response from a user

Variants size input

There're 3 variants of textbox, its : small, medium, large

Here is the way to choose one of them, just put class like -small, -medium, -large part on the class. You only have to choose one.

As default we dont put -medium class for medium variant size.

Or you can put -medium class to make sure you choose medium variant size for textbox.

Style input

There're 2 variant styles of textbox, its : -text and -tinted. Text style is mean, all of component form is white background, and then Tinted is mean grey background.

For example : use this class to choose Text or Tinted style : .t-input-text or .t-input-text-tinted

Source code 

<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>

Textbox

These some examples of textboxes we provide.

*Notes : before you create an element form, you have to wrapped it using form class, like this <form class="t-form"> so, you can put some elements inside form tag.

Source code 

<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>
Source code 

<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>
Source code 

<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>
Source code 

<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>
Source code 

<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>
Source code 

<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>
Source code 

<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>
The company field is required.
Source code 

<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>
We’ll never share your email with anyone else
Source code 

<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>
Source code 

<div class="t-input-group">
  <label class="t-input-label">
    Textarea 
  </label>
  <textarea placeholder="Placeholder" rows="5" class="t-input-textarea-tinted"></textarea>
</div>
<%= require('html-loader!./../components/footer-documentation.html') %>
<%= require('html-loader!./../components/footer.html') %>
<%= require('html-loader!./../components/footer-script.html') %>