5.1.3 forms.base.input Inputs

Toggle example guides Toggle HTML markup

The <input> element is mostly used for text-based inputs that include the HTML5 types: text, search, tel, url, email, password, date, time, number, range, color, and file.

Note: Certain font size values applied to number inputs cause the cursor style of the decrement button to change from default to text.

Note: The search input is not fully stylable by default. In Chrome and Safari on OSX/iOS you can't control font, padding, border, or background. In Chrome and Safari on Windows you can't control border properly. It will apply border-width but will only show a border color (which cannot be controlled) for the outer 1px of that border. Applying -webkit-appearance: textfield addresses these issues without removing the benefits of search inputs (e.g. showing past searches). Safari (but not Chrome) will clip the cancel button on when it has padding (and textfield appearance).

Example
Markup: base/forms/forms-input.twig 
<div>
  <label for="inputText">Text</label>
  <input type="text" class="{{modifier_class}}" id="inputText" placeholder="Enter some text">
</div>
<div>
  <label for="inputSearch">Search</label>
  <input type="search" class="{{modifier_class}}" id="inputSearch" placeholder="Search">
</div>
<div>
  <label for="inputTel">Telephone</label>
  <input type="text" class="{{modifier_class}}" id="inputTel" placeholder="Enter some text">
</div>
<div>
  <label for="inputURL">URL</label>
  <input type="url" class="{{modifier_class}}" id="inputURL" placeholder="Enter a URL">
</div>
<div>
  <label for="inputEmail">Email address</label>
  <input type="email" class="{{modifier_class}}" id="inputEmail" placeholder="Enter email">
</div>
<div>
  <label for="inputPassword">Password</label>
  <input type="password" class="{{modifier_class}}" id="inputPassword" placeholder="Password">
</div>
<div>
  <label for="inputDate">Date</label>
  <input type="date" class="{{modifier_class}}" id="inputDate" placeholder="Enter a date">
</div>
<div>
  <label for="inputTime">Time</label>
  <input type="time" class="{{modifier_class}}" id="inputTime" placeholder="Enter a time">
</div>
<div>
  <label for="inputNumber">Number</label>
  <input type="number" class="{{modifier_class}}" id="inputNumber" placeholder="Enter a number">
</div>
<div>
  <label for="inputRange">Range</label>
  <input type="range" class="{{modifier_class}}" id="inputRange" placeholder="Enter a range">
</div>
<div>
  <label for="inputColor">Color</label>
  <input type="color" class="{{modifier_class}}" id="inputColor" placeholder="Enter a color">
</div>
<div>
  <label for="inputFile">File input</label>
  <input type="file" class="{{modifier_class}}" id="inputFile">
</div>

<div>
  <label for="inputText">Disabled text</label>
  <input type="text" class="{{modifier_class}}" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
  <label for="inputSearch">Disabled search</label>
  <input type="search" class="{{modifier_class}}" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
  <label for="inputTel">Disabled telephone</label>
  <input type="text" class="{{modifier_class}}" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
  <label for="inputURL">Disabled URL</label>
  <input type="url" class="{{modifier_class}}" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
  <label for="inputEmail">Disabled email address</label>
  <input type="email" class="{{modifier_class}}" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
  <label for="inputPassword">Disabled password</label>
  <input type="password" class="{{modifier_class}}" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
  <label for="inputDate">Disabled date</label>
  <input type="date" class="{{modifier_class}}" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
  <label for="inputTime">Disabled time</label>
  <input type="time" class="{{modifier_class}}" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
  <label for="inputNumber">Disabled number</label>
  <input type="number" class="{{modifier_class}}" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
  <label for="inputRange">Disabled range</label>
  <input type="range" class="{{modifier_class}}" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
  <label for="inputColor">Disabled color</label>
  <input type="color" class="{{modifier_class}}" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
  <label for="inputFile">Disabled file input</label>
  <input type="file" class="{{modifier_class}}" disabled id="inputFile">
</div>
Source: base/forms/_forms.scss, line 102