R A D I U S

Must not be used on its own. Should be coupled with other form atoms inside a form-element component.

Form input

Use to enable users to provide information.

Description

The information can be provided through a range of different types of input fields (e.g checkboxes, date, email etc.).

Depending on the value of its type attribute, the functionality of the input can change considerably.

The input usually consists of an icon that represents a visual indication of the type of action that needs to be performed. In general, the icon has usually a decorative purpose but it can also be used as a control allowing the user to interact with the input. In this case, the variant class form-input__icon--control needs to be added on the .form-input__icon element.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-form-input;

Usage

Usage example

Input with decorative icon

Input with control icon

Input with unit

Disabled Input

Code example

<div class="form-input form-input--icon">
  <input type="text" class="form-input__element" id="input" placeholder="Placeholder">
    <svg class="svg-icon form-input__icon" aria-labelledby="search-icon-title">
      <title id="search-icon-title">Search icon</title>
      <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#search"></use>
    </svg>
</div>

<div class="form-input form-input--icon">
  <input type="text" class="form-input__element" id="input" placeholder="Placeholder">
    <button aria-label="close" type="button" class="control-icon form-input__icon form-input__icon--control">
      <svg class="svg-icon" aria-labelledby="cross-icon-title">
        <title id="cross-icon-title">Cross icon</title>
        <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross"></use>
      </svg>
    </button>
</div>

<h4 class="component-variant__title">Input with unit</h4>
<div class="form-input form-input--icon">
  <div class="form-input__unit">£</div>
  <input type="text" class="form-input__element" id="input" placeholder="Placeholder">
</div>

<div class="u-mb-medium">

<h4 class="component-variant__title">Disabled Input</h4>
<div class="form-input form-input--icon">
  <div class="form-input__unit">£</div>
  <input type="text" class="form-input__element" id="input" placeholder="Placeholder" disabled >
</div>