Components/Forms/Form Label

Form labels are used to identify form elements such as input fields, checkboxes and radio buttons. This component is best used as a child element of the **Form Item** component.

Use the default form label when the field is optional and does not require special styling or behavior.

To visually and programmatically indicate a required field, add the fd-form-label--required modifier to the label and use the required and aria-required="true" attributes on the input.

To display a label with a colon, add the fd-form-label--colon modifier.

There are 3 ways to visually show that a label is disabled: 1. Add aria-disabled="true". This communicates to assistive technologies (like screen readers) that the label is representing a disabled UI element. 2. Add is-disabled class to fd-form-label class. 3. Add fd-form-label--disabled modifier class to fd-form-label class.