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 <label> to associate text with form elements explicitly.

Form Label

<label class="qtm-form-label">
<span>Form Label</span>
</label>

Sizes

Control the size of a form label using .qtm-small, .qtm-medium or .qtm-large classes. By default, the label has size medium.

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

Required

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

Form Label
<label class="qtm-form-label qtm-required">
<span>Form Label</span>
<label></label
></label>

Disabled

Add .qtm-disabled in form label to disable the element.

Form Label
<label class="qtm-form-label qtm-disabled"><span>Form Label</span></label>