Design Kit

Text Input

Text inputs are used for inputting single line text data.

Examples

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

Base

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

Disabled

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

Invalid

Text inputs support Chi's semantic class modifier -danger for indicating an invalid input.

This is an invalid label
<div class="chi-form__item">
  <label class="chi-label" for="example__danger">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input -danger" value="Sample Text" id="example__danger">
    <i class="chi-icon icon-circle-warning -text--danger"></i>
  </div>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

Label with icon

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

Inline Label

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

Inline Label - width controlled using percent

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

Inline Label - width controlled using grid

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

Inline Inputs

<div class="-d--flex">
  <div class="chi-form__item -inline -flex--grow1">
    <label class="chi-label" for="example__inline-input01">Label</label>
    <input class="chi-input" type="text" id="example__inline-input01" placeholder="Placeholder">
  </div>
  <div class="chi-form__item -inline -flex--grow1">
    <label class="chi-label" for="example__inline-input02">Label</label>
    <input class="chi-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 chi-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="chi-form__item">
  <label class="chi-label" for="example__icon-left-aligned">Label</label>
  <div class="chi-input__wrapper -icon--left">
    <input type="text" class="chi-input" placeholder="Placeholder" value="Sample text" id="example__icon-left-aligned">
    <i class="chi-icon icon-search -text--muted"></i>
    </div>
  </div>
</div>

Right Aligned

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

Left + Right Aligned

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

States

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

Success

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

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

Warning

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

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

Danger

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

<div class="chi-form__item">
  <label class="chi-label" for="example__state-danger-with-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <input type="text" class="chi-input -danger" placeholder="Placeholder" value="Sample Text" id="example__state-danger-with-icon">
    <i class="chi-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="chi-form__item">
  <label class="chi-label" for="example__size-sm">Label</label>
  <input type="text" class="chi-input -sm" placeholder="Sample Text" id="example__size-sm">
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__size-md">Label</label>
  <input type="text" class="chi-input -md" placeholder="Sample Text" id="example__size-md">
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__size-lg">Label</label>
  <input type="text" class="chi-input -lg" placeholder="Sample Text" id="example__size-lg">
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__size-xl">Label</label>
  <input type="text" class="chi-input -xl" placeholder="Sample Text" id="example__size-xl">
</div>

Floating labels

Floating labels are a solution to keep the placeholder visible when no label is attached to the input. Chi only supports floating labels on -lg and -xl inputs.

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -lg" type="text" id="floating-label-lg">
  <label for="floating-label-lg">Placeholder text</label>
</div>

<div class="chi-input__wrapper -floating-label">
  <input class="chi-input -xl" type="text" id="floating-label-xl">
  <label for="floating-label-xl">Placeholder text</label>
</div>

<script>
  chi.floatingLabel(document.querySelectorAll('.-floating-label'));
</script>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon