Label

Use Label together with form control elements like input, select, checkbox, etc.

Examples

Base #

<chi-label>Label</chi-label>
<label class="chi-label">Label</label>

Required / Optional #

Use attribute required or optional if you need to indicate required / optional fields.

<!-- Required -->
<chi-label required>Label</chi-label>

<!-- Optional -->
<chi-label optional>Label</chi-label>
<!-- Required -->
<label class="chi-label">
  Label
  <abbr class="chi-label__required" aria-label="Required field">*</abbr>
</label>

<!-- Optional -->
<label class="chi-label">
  Label
  <abbr class="chi-label__optional" aria-label="Optional field">(optional)</abbr>
</label>

Sizes #

Label supports the following sizes: xs, sm, md, lg, xl. The default size is md.

<!-- xs -->
<chi-label size="xs">Label</chi-label>

<!-- sm -->
<chi-label size="sm">Label</chi-label>

<!-- md -->
<chi-label size="md">Label</chi-label>

<!-- lg -->
<chi-label size="lg">Label</chi-label>

<!-- xl -->
<chi-label size="xl">Label</chi-label>
<!-- xs -->
<label class="chi-label -xs">Label</label>

<!-- sm -->
<label class="chi-label -sm">Label</label>

<!-- md -->
<label class="chi-label -md">Label</label>

<!-- lg -->
<label class="chi-label -lg">Label</label>

<!-- xl -->
<label class="chi-label -xl">Label</label>

Associate label with form elements #

Label is important for accessibility of form elements.

Associate chi-label with supported form-control web components
<chi-label for="number-input">Label</chi-label>
<chi-number-input id="number-input"></chi-number-input>

<chi-label for="chi-date-picker">Label</chi-label>
<chi-date-picker id="chi-date-picker"></chi-date-picker>
<div class="chi-form__item">
  <label for="number-input" class="chi-label">Label</label>
  <div class="chi-number-input">
    <input id="number-input" type="number" class="chi-input" value="0" aria-label="Input Label">
    <button aria-label="Decrease"></button>
    <button aria-label="Increase"></button>
  </div>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="datepicker-1">Date</label>
  <div class="chi-input__wrapper -icon--right">
    <input id="datepicker-1" type="text" class="chi-input" placeholder="MM/DD/YYYY">
    <i class="chi-icon icon-date -icon--muted" aria-hidden="true"></i>
  </div>
</div>

Help #

Use attribute infoIcon and infoIconMessage to include a help icon that displays helpful information in a popover.

<chi-label info-icon info-icon-message="Changed helpful information">Label</chi-label>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-label__wrapper">
  <label class="chi-label">Label</label>
  <div class="chi-label__help">
    <div class="chi-button -icon -xs -flat" id="example__help-button" aria-label="Help" data-target="#example__help-popover">
      <div class="chi-button__content">
        <i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
      </div>
    </div>
    <section class="chi-popover chi-popover--bottom" id="example__help-popover" aria-modal="true" role="dialog">
      <div class="chi-popover__content">
        <p class="chi-popover__text">Helpful information goes here.</p>
      </div>
    </section>
  </div>
</div>

<script>chi.popover(document.getElementById('example__help-button'));</script>

Web Component

Accessibility

Accessibility guidelines coming soon