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" 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.

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