Haptic components

• Badges
• Buttons
• Checkboxes
• Chips
• Fields
• Lists
• Radio buttons
• Switches

Badges

<span class="haptic-badge {modifier}">Text</span>

Buttons

Icon buttons

<button class="haptic-icon-button {modifiers}">close</button>

Text buttons

<button class="haptic-button {modifiers}">Text</button>

With icon

<button class="haptic-button {modifiers}">
  <div class="icon">spa</div>
  Text
</button>

Segmented buttons

<haptic-segmented-button>
  <haptic-button-segment>
    <input type="radio" class="{modifier}"/>
    <label>One</label>
  </haptic-button-segment>
  <haptic-button-segment>
    <input type="radio" class="{modifier}"/>
    <label>Two</label>
  </haptic-button-segment>
  <haptic-button-segment>
    <input type="radio" class="{modifier}"/>
    <label>Three</label>
  </haptic-button-segment>
</haptic-segmented-button>

Checkboxes

<input type="checkbox" class="haptic-checkbox {modifier}"/>

Chips

<haptic-chip>
  <input type="checkbox" class="{modifier}"/>
  <label>One</label>
</haptic-chip>

Fields

Text fields

<input type="text" class="haptic-field {modifier}" placeholder="{placeholder}"/>

With leading icon

<haptic-text-field class="field-container">
  <input type="text" class="haptic-field {modifier}" placeholder="{placeholder}"/>
  <div class="leading-icon">{name}</div>
</haptic-text-field>

With clear button

<haptic-text-field class="field-container">
  <input type="text" class="haptic-field {modifier}"/>
  <button class="clear-button">close</button>
</haptic-text-field>

With error icon

<haptic-text-field class="field-container" invalid>
  <input type="text" class="haptic-field {modifier}"/>
  <div class="error-icon">error</div>
</haptic-text-field>

With error icon and clear button

<haptic-text-field class="field-container" invalid>
  <input type="text" class="haptic-field {modifier}"/>
  <button class="clear-button">close</button>
  <div class="error-icon">error</div>
</haptic-text-field>

With supporting text

<haptic-text-field>
  <div class="field-container">
    <input type="text" class="haptic-field {modifier}" placeholder="{placeholder}"/>
  </div>
  <div class="supporting-text">{supporting text}</div>
</haptic-text-field>

With error icon and error message

<haptic-text-field invalid>
  <div class="field-container">
    <input type="text" class="haptic-field {modifier}"/>
    <div class="error-icon">error</div>
  </div>
  <div class="error-message">{error message}</div>
</haptic-text-field>

With label

<haptic-text-field class="field-container" animated-label focus-indicator>
  <input type="text" class="haptic-field {modifier}"/>
  <label class="field-label">{label}</label>
</haptic-text-field>

With label and leading icon

<haptic-text-field class="field-container" animated-label focus-indicator>
  <input type="text" class="haptic-field {modifier}"/>
  <label class="field-label">{label}</label>
  <div class="leading-icon">{name}</div>
</haptic-text-field>

With label and clear button

<haptic-text-field class="field-container" animated-label focus-indicator>
  <input type="text" class="haptic-field {modifier}"/>
  <label class="field-label">{label}</label>
  <button class="clear-button">close</button>
</haptic-text-field>

With label and error icon

<haptic-text-field class="field-container" animated-label focus-indicator invalid>
  <input type="text" class="haptic-field {modifier}"/>
  <label class="field-label">{label}</label>
  <div class="error-icon">error</div>
</haptic-text-field>

With label, error icon and clear button

<haptic-text-field class="field-container" animated-label focus-indicator invalid>
  <input type="text" class="haptic-field {modifier}"/>
  <label class="field-label">{label}</label>
  <button class="clear-button">close</button>
  <div class="error-icon">error</div>
</haptic-text-field>

With label and supporting text

<haptic-text-field animated-label focus-indicator>
  <div class="field-container">
    <input type="text" class="haptic-field {modifier}"/>
    <label class="field-label">{label}</label>
  </div>
  <div class="supporting-text">{supporting text}</div>
</haptic-text-field>

With label, error icon and error message

<haptic-text-field animated-label focus-indicator invalid>
  <div class="field-container">
    <input type="text" class="haptic-field {modifier}"/>
    <label class="field-label">{label}</label>
    <div class="error-icon">error</div>
  </div>
  <div class="error-message">{error message}</div>
</haptic-text-field>

Select fields

<haptic-dropdown-field class="field-container">
  <select class="haptic-field {modifier}">
    <option value="one" selected>One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
</haptic-dropdown-field>

With label

<haptic-dropdown-field class="field-container">
  <select class="haptic-field {modifier}">
    <option value="one" selected>One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
  </select>
  <label class="field-label">{label}</label>
</haptic-dropdown-field>

Custom select fields

<haptic-dropdown-field class="field-container">
  <haptic-select-dropdown>
    <input type="hidden" name="{name}"/>
    <div class="toggle haptic-field {modifier}">One</div>
    <div class="popover">
      <haptic-option-list>
        <haptic-option value="one" checked>One</haptic-option>
        <haptic-option value="two">Two</haptic-option>
        <haptic-option value="three">Three</haptic-option>
      </haptic-option-list>
    </div>
  </haptic-select-dropdown>
</haptic-dropdown-field>

With label

  <haptic-dropdown-field class="field-container">
    <haptic-select-dropdown>
      <input type="hidden" name="{name}"/>
      <div class="toggle haptic-field {modifier}">One</div>
      <div class="popover">
        <haptic-option-list>
          <haptic-option value="one" checked>One</haptic-option>
          <haptic-option value="two">Two</haptic-option>
          <haptic-option value="three">Three</haptic-option>
        </haptic-option-list>
      </div>
    </haptic-select-dropdown>
    <label class="field-label">{label}</label>
  </haptic-dropdown-field>

Lists

<haptic-list class="{list-modifier}">
  <haptic-list-item>
    <div>
      {headline}
      <div class="supporting-text">{supporting text}<div>
    </div>
  </haptic-list-item>
</haptic-list>

With checkboxes

<haptic-list class="{list-modifier}">
  <haptic-list-item class="{list-item-modifier}">
    <input type="checkbox" class="haptic-checkbox {checkbox-modifier}"/>
    <label>
      {headline}
      <div class="supporting-text">{supporting text}<div>
    </label>
  </haptic-list-item>
</haptic-list>

With switches

<haptic-list class="{list-modifier}">
  <haptic-list-item class="{list-item-modifier}">
    <input type="checkbox" class="haptic-switch {switch-modifiers}"/>
    <label>
      {headline}
      <div class="supporting-text">{supporting text}<div>
    </label>
  </haptic-list-item>
</haptic-list>

With radio buttons

<haptic-list class="{list-modifier}">
  <haptic-list-item class="{list-item-modifier}">
    <input type="radio" class="haptic-radio-button {radio-button-modifier}"/>
    <label>
      {headline}
      <div class="supporting-text">{supporting text}<div>
    </label>
  </haptic-list-item>
</haptic-list>

Radio buttons

<input type="radio" class="haptic-radio-button {modifier}"/>

Switches

<input type="checkbox" class="haptic-switch {modifiers}"/>