Input

Module Requirements

This module requires the "Font Awesome 5 Free" font to be available on the page

The npm package used for a given release can be found in package.json under optionalDependencies

Examples

Text inputs

Default State

Invalid State

Disabled State

Readonly State

Textarea inputs

Default State

Invalid State

Disabled State

Readonly State

Checkbox Inputs

Default State

Disabled State

Invalid State

Radio Inputs

Default State

Disabled State

Invalid State

HTML

<p class="hx-header-medium">Text inputs</p>
<div class="hx-form hx-flag-form">
  <div class="hx-form-group">
    <label class="hx-form-label">Default State</label>
    <input class="hx-input" placeholder="Placeholder Text">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Invalid State</label>
    <input class="hx-input" required placeholder="Required">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Disabled State</label>
    <input class="hx-input" disabled placeholder="Disabled">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Readonly State</label>
    <input class="hx-input" readonly placeholder="Readonly">
  </div>
</div>

<p class="hx-header-medium">Textarea inputs</p>
<div class="hx-form hx-flag-form">
  <div class="hx-form-group">
    <label class="hx-form-label">Default State</label>
    <textarea class="hx-input-textarea" placeholder="Placeholder Text"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Invalid State</label>
    <textarea class="hx-input-textarea" required placeholder="Required"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Disabled State</label>
    <textarea class="hx-input-textarea" disabled placeholder="Disabled"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Readonly State</label>
    <textarea class="hx-input-textarea" readonly placeholder="Readonly"></textarea>
  </div>
</div>

<p class="hx-header-medium">Checkbox Inputs</p>
<div class="hx-form hx-flag-form">
  <div class="hx-form-group">
    <input class="hx-input-checkbox" type="checkbox"><label class="hx-form-label">Default State</label>
  </div>
  <div class="hx-form-group">
    <input class="hx-input-checkbox" disabled type="checkbox"><label class="hx-form-label">Disabled State </label>
  </div>
  <div class="hx-form-group">
    <input class="hx-input-checkbox" required type="checkbox"><label class="hx-form-label">Invalid State</label>
  </div>
</div>

<p class="hx-header-medium">Radio Inputs</p>
<div class="hx-form hx-flag-form">
  <div class="hx-form-group">
    <input class="hx-input-radio" type="radio"><label class="hx-form-label">Default State</label>
  </div>
  <div class="hx-form-group">
    <input class="hx-input-radio" disabled type="radio"><label class="hx-form-label">Disabled State </label>
  </div>
  <div class="hx-form-group">
    <input class="hx-input-radio" required name="r1" type="radio"><label class="hx-form-label">Invalid State</label>
  </div>
</div>

Api

Change Log

Classes

hx-input

A class to give to inputs to apply the Hexagon styling to them.

This replaces the styles applied directly to the input tag which will be removed in the next major release

hx-input-checkbox

A class to give to an input of type 'checkbox' to apply the hexagon styling.

hx-input-radio

A class to give to an input of type 'radio' to apply the hexagon styling.

hx-input-textarea

A class to give to textarea elements to apply the hexagon styling.