Label

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

Examples#

Base#

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

Required / Optional#

LabelLabel
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" title="Required field">*</abbr>
</label>

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

Sizes#

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

LabelLabelLabelLabelLabel
<!-- 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.

LabelLabel
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>

Web Component#

Properties#

Property
Attribute
Description
Type
Default
for
for
To indicate ID of target form control web component.
string
undefined
optional
optional
To indicate which form field is optional.
boolean
false
required
required
To indicate which form field is required.
boolean
false
size
size
OPTIONAL. Size of the label. { xs, sm, md, lg, xl }.
string
'md'

Accessibility#

Accessibility guidelines coming soon