Label
Examples
Base #
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>