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.
<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
<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.
<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.
<qtm-form-label required><span>Form Label</span></qtm-form-label>
Disabled
Add disabled
attribute in form label to disable the element.
<qtm-form-label disabled><span>Form Label</span></qtm-form-label>
API
qtm-form-label
Property | Type | Default | Description |
---|---|---|---|
classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
disabled | boolean | false | If true, the component is disabled. |
for | string | The for attribute refers to the id of the element this label is associated with | |
required | boolean | false | display red required asterik indicating that the field is required |
size | "large" | "medium" | "small" | 'medium' | The size of element |