Design Kit

Text Input

Text inputs are used for inputting single line text data.

Examples

To render a text input, apply the class a-input to an input type="text", input type="password", input type="email", etc.

Base

<div class="m-form__item">
  <label class="a-label" for="example__base">Label</label>
  <input type="text" class="a-input" placeholder="Placeholder" id="example__base">
</div>

Disabled

<div class="m-form__item">
  <label class="a-label" for="example__disabled">Label</label>
  <input type="text" class="a-input" value="Sample Text" id="example__disabled" disabled>
</div>

Danger

Text inputs support the validation class modifier -danger for indicating an invalid input.

<div class="m-form__item">
  <label class="a-label" for="example__danger">Label</label>
  <input type="text" class="a-input -danger" value="Sample Text" id="example__danger">
</div>

Label with icon

<div class="m-form__item">
  <div class="m-label__wrapper">
    <label class="a-label" for="example__label-with-icon">Label</label>
    <i class="a-icon icon-circle-info-outline -text--muted"></i>
  </div>
  <input class="a-input" id="example__label-with-icon" type="text" placeholder="Placeholder">
</div>

Inline Label

<div class="m-form__item -row">
  <label class="a-label" for="example__inline-label">Label</label>
  <input class="a-input" type="text" id="example__inline-label" placeholder="Placeholder">
</div>

Inline Label - width controlled using percent

<div class="m-form__item -row">
  <label class="a-label -w--50" for="example__inline-label-percent">Label</label>
  <div class="-w--50">
    <input class="a-input" type="text" id="example__inline-label-percent" placeholder="Placeholder">
  </div>
</div>

Inline Label - width controlled using grid

<div class="m-form__item -row a-grid -noGutter">
  <label class="a-label -w--3" for="example__inline-label-grid">Label</label>
  <div class="-w--9">
    <input class="a-input" type="text" id="example__inline-label-grid" placeholder="Placeholder">
  </div>
</div>

Inline Inputs

<div class="-d--flex">
  <div class="m-form__item -inline -flex--grow1">
    <label class="a-label" for="example__inline-input01">Label</label>
    <input class="a-input" type="text" id="example__inline-input01" placeholder="Placeholder">
  </div>
  <div class="m-form__item -inline -flex--grow1">
    <label class="a-label" for="example__inline-input02">Label</label>
    <input class="a-input" type="text" id="example__inline-input02" placeholder="Placeholder">
  </div>
</div>

Icons

To add icons to a text input, wrap the input in a div using the class m-input__wrapper. Next, add the icon as a sibling of the input and utilize an icon alignment utility class (e.g. -icon--left) to specify where it should be placed.

Left Aligned

<div class="m-form__item">
  <label class="a-label" for="example__icon-left-aligned">Label</label>
  <div class="m-input__wrapper -icon--left">
    <input type="text" class="a-input" placeholder="Placeholder" value="Sample text" id="example__icon-left-aligned">
    <i class="a-icon icon-search -text--muted"></i>
    </div>
  </div>
</div>

Right Aligned

<div class="m-form__item">
  <label class="a-label" for="example__icon-right-aligned">Label</label>
  <div class="m-input__wrapper -icon--right">
    <input type="text" class="a-input" placeholder="Placeholder" value="Sample text" id="example__icon-right-aligned">
    <i class="a-icon icon-search -text--muted"></i>
  </div>
</div>

Left + Right Aligned

<div class="m-form__item">
  <label class="a-label" for="example__icon-left-right-aligned">Label</label>
  <div class="m-input__wrapper -icon--left -icon--right">
    <input type="text" class="a-input" placeholder="Placeholder" value="Sample text" id="example__icon-left-right-aligned">
    <i class="a-icon icon-search -text--muted"></i>
    <i class="a-icon icon-check -text--success"></i>
  </div>
</div>

States

Text inputs offer three validation states: -success, -warning, and -danger.

Success

<div class="m-form__item">
  <label class="a-label" for="example__state-success">Label</label>
  <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text" id="example__state-success">
</div>

<div class="m-form__item">
  <label class="a-label" for="example__state-success-with-icon">Label</label>
  <div class="m-input__wrapper -icon--right">
    <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text" id="example__state-success-with-icon">
    <i class="a-icon icon-check -text--success"></i>
  </div>
</div>

Warning

<div class="m-form__item">
  <label class="a-label" for="example__state-warning">Label</label>
  <input type="text" class="a-input -warning" placeholder="Placeholder" value="Sample Text" id="example__state-warning">
</div>

<div class="m-form__item">
  <label class="a-label" for="example__state-warning-with-icon">Label</label>
  <div class="m-input__wrapper -icon--right">
    <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text" id="example__state-warning-with-icon">
    <i class="a-icon icon-warning -text--warning"></i>
  </div>
</div>

Danger

<div class="m-form__item">
  <label class="a-label" for="example__state-danger">Label</label>
  <input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger">
</div>

<div class="m-form__item">
  <label class="a-label" for="example__state-danger-with-icon">Label</label>
  <div class="m-input__wrapper -icon--right">
    <input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger-with-icon">
    <i class="a-icon icon-circle-warning -text--danger"></i>
  </div>
</div>

Sizes

Text inputs supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<div class="m-form__item">
  <label class="a-label" for="example__size-sm">Label</label>
  <input type="text" class="a-input -sm" placeholder="Sample Text" id="example__size-sm">
</div>
<div class="m-form__item">
  <label class="a-label" for="example__size-md">Label</label>
  <input type="text" class="a-input -md" placeholder="Sample Text" id="example__size-md">
</div>
<div class="m-form__item">
  <label class="a-label" for="example__size-lg">Label</label>
  <input type="text" class="a-input -lg" placeholder="Sample Text" id="example__size-lg">
</div>
<div class="m-form__item">
  <label class="a-label" for="example__size-xl">Label</label>
  <input type="text" class="a-input -xl" placeholder="Sample Text" id="example__size-xl">
</div>

Floating labels

This component requires Javascript

Floating labels are a solution to keep the placeholder visible when no label is attached to the input. Chi supports floating labels for -lg and -xl inputs. This component requires JavaScript to add/remove the -active class whenever the input focuses or is not empty.

<div class="m-input__wrapper -floatingLabel">
  <input class="a-input -lg" type="text" id="floating-label-lg">
  <label for="floating-label-lg">Placeholder text</label>
</div>

<div class="m-input__wrapper -floatingLabel">
  <input class="a-input -xl" type="text" id="floating-label-xl">
  <label for="floating-label-xl">Placeholder text</label>
</div>
<div class="m-input__wrapper -floatingLabel">
  <input class="a-input -lg" type="text" id="floating-label-lg">
  <label class="-active" for="floating-label-lg">Placeholder text</label>
</div>

<div class="m-input__wrapper -floatingLabel">
  <input class="a-input -xl" type="text" id="floating-label-xl">
  <label class="-active" for="floating-label-xl">Placeholder text</label>
</div>