R A D I U S

Must not be used on its own. Should be coupled with other form atoms inside a form-element component.

Form label

Use to provide information to the user about the element it introduces.

Description

A labelable form-related element with an ID matching the value of the label's for attribute is called a labelled control for this label element.

It is always important to provide labels for controls, to inform the user about the control's purpose; and explicitly associate the label with its control (e.g. using the for attribute) to improve accessibility for screen readers in form mode.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-form-label;

Usage

Usage example

This is a label

Code example

<label for="labeled-control-id" class="form-label">
  <span>This is a label</span>
  <svg class="svg-icon svg-icon--solid-error form-label__icon-error" aria-hidden="true">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#cross-circle-solid"></use>
  </svg>
  <svg class="svg-icon svg-icon--solid-success form-label__icon-success" aria-hidden="true">
    <use xlink:href="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/icons/svg-sprite.svg#tick-circle-solid"></use>
  </svg>
</label>