Forms & Inputs

The <input> element is used to create interactive controls for forms in order to accept or retrieve data from/for the user.

The function or value of an <input> depends on the value of its ’type attribute’. For more information on <input> values, please see the MDN web docs.

As with other elements in the Delta Design System, we try to be as semantic and use the fewest elements as possible to create our forms. We use css transitions to move the <label> out of place and expose the :placeholder when the <input> is in the :focus state.

All <input> fields (including <button>) must also include both the <span class="message"> in order to render the vertical spacing for validation messages properly and eliminate jank. To show an .errow or .valid message, simply add a .show class to the appropriate message whenever necessary.

Input Examples

Text Inputs

Error message goes here Valid message goes here

Though we’re only showing a text input example above, this is the same code structure required for other input types such as email, phone, search, url, etc.

html
<fieldset>
  <input type="text" name="text-input" id="text-input" placeholder="Placeholder">
  <label for="text-input">Label</label>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>

Text Inputs with Icons

Error message goes here Valid message goes here
html
<fieldset>
  <input type="text" name="text-input-icon" id="text-input-icon" placeholder="Placeholder">
  <label for="text-input-icon">Label</label>
  <div class="input-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm-2 2H9v2H7V5H4v4h16V5h-3v2h-2V5zm5 6H4v8h16v-8z"/></svg>
  </div>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>

Password Inputs

Error message goes here Valid message goes here
html
<fieldset>
  <input type="password" name="password" id="password" placeholder="Placeholder" autocomplete="on">
  <label for="password">Label</label>
  <div id="#password" class="show-hide-password">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="show"><path fill="none" d="M0 0h24v24H0z"/><path d="M17.882 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.819-9a10.982 10.982 0 0 1 3.34-6.066L1.392 2.808l1.415-1.415 19.799 19.8-1.415 1.414-3.31-3.31zM5.935 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.935 7.35zm6.979 6.978l-3.242-3.242a2.5 2.5 0 0 0 3.241 3.241zm7.893 2.264l-1.431-1.43A8.935 8.935 0 0 0 20.777 12 9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.592zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.769z"/></svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="hide"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>
  </div>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>
script
$(".show-hide-password").click(function() {
  $(this).toggleClass("show");
  var input = $($(this).attr("id"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

Select Inputs

Error message goes here Valid message goes here
html
<fieldset>
  <select name="select" id="select">
    <option value="0">This is a select input</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label for="select">Label</label>
  <span class="select-icon">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
  </span>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>

Checkboxes

Error message goes here Valid message goes here

For checkboxes we wrap the <input> inside the <label>. This is still semantically correct, and we use css to create a design consistent with the other elements of the system.

html
<fieldset class="checkbox">
  <label for="checkbox" class="checkbox">Label<input type="checkbox" name="checkbox" id="checkbox"></label>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>

Radio Buttons

Error message goes here Valid message goes here

For radio buttons we wrap the <input> inside the <label>. This is still semantically correct, and we use css to create a design consistent with the other elements of the system.

html
<fieldset class="radio">
  <label for="radio-one" class="radio">Radio label one<input type="radio" name="radio" id="radio-one"></label>
  <label for="radio-two" class="radio">Radio label two<input type="radio" name="radio" id="radio-two"></label>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>

Toggle Switches

Error message goes here Valid message goes here

For toggles we wrap the <input> inside the <label>. This is still semantically correct, and we use css to create a design consistent with the other elements of the system.

html
<fieldset class="toggle">
  <label for="toggle" class="toggle">Label<input type="checkbox" name="toggle" class="toggle" id="toggle"></label>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>

Buttons

<input> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality as required when assigned an event handler function (typically for the click event).

<input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). To make buttons do anything, you have to write JavaScript code to do the work.

<input type="button"> by Mozilla Contributors is licensed under CC-BY-SA 2.5.

html
<fieldset class="button-input">
  <input type="button" name="button" id="button" class="button" value="Button" aria-pressed="false">
</fieldset>

Small Inputs

If you need to create an input that is less wide than normal, just add a .sm class to that input’s fieldset.

Error message goes here Valid message goes here
html
<fieldset class="sm">
  <input type="text" name="text-input-small" id="text-input-small" placeholder="Placeholder">
  <label for="text-input-small">Label</label>
  <div class="message">
    <span class="error">Error message goes here</span>
    <span class="valid">Valid message goes here</span>
  </div>
</fieldset>