Label

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

Examples#

Base#

Label

Web Component
HTML Blueprint

<chi-label>Label</chi-label>

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

Required / Optional#

Label

Web Component
HTML Blueprint

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.

Label

Web Component
HTML Blueprint

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

Label

Web Component
HTML Blueprint

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