Skip to main content
🏠FormForm LabelVersion: Next

Form Label

qtm-form-label element need to describe the purpose of the form field. Whenever possible, use the label element to associate text with form elements explicitly.

Form Label
<qtm-form-label><span>Form Label</span></qtm-form-label>

For attribute​

The for attribute refers to the id of the element this label is associated with

Email
<qtm-form-label for="text-input-id"><span>Email</span></qtm-form-label>
<qtm-text-input
  input-id="text-input-id"
  placeholder="Enter email"
></qtm-text-input>

Sizes​

Control the size of a form label setting size attribute to small, medium or large value. By default, the label has size medium.

Form Label SmallForm Label MediumForm Label Large
<qtm-form-label size="small"><span>Form Label Small</span></qtm-form-label>
<qtm-form-label size="medium"><span>Form Label Medium</span></qtm-form-label>
<qtm-form-label size="large"><span>Form Label Large</span></qtm-form-label>

Required​

Add required attribute in form label to put a red required asterik to the first child of label to indicate that the field is required.

Form Label
<qtm-form-label required><span>Form Label</span></qtm-form-label>

Disabled​

Add disabled attribute in form label to disable the element.

Form Label
<qtm-form-label disabled><span>Form Label</span></qtm-form-label>

API​

Loading API documentation...