Skip to main content
🏠FormForm LabelVersion: 2.0.0-beta.7

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

qtm-form-label

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
forstringThe for attribute refers to the id of the element this label is associated with
requiredbooleanfalsedisplay red required asterik indicating that the field is required
size"large" | "medium" | "small"'medium'The size of element