Form Label
QtmFormLabel
element need to describe the purpose of the form field. Whenever possible, use the label element to associate text with form elements explicitly.
<QtmFormLabel><span>Form Label</span></QtmFormLabel>
For attribute
The for
attribute refers to the id of the element this label is associated with
<QtmFormLabel for="text-input-id"><span>Email</span></QtmFormLabel>
<QtmTextInput inputId="text-input-id" placeholder="Enter email"></QtmTextInput>
Sizes
Control the size of a form label setting size
attribute to small
, medium
or large
value. By default, the label has size medium.
<QtmFormLabel size="small"><span>Form Label Small</span></QtmFormLabel>
<QtmFormLabel size="medium"><span>Form Label Medium</span></QtmFormLabel>
<QtmFormLabel size="large"><span>Form Label Large</span></QtmFormLabel>
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.
<QtmFormLabel required><span>Form Label</span></QtmFormLabel>
Disabled
Add disabled
attribute in form label to disable the element.
<QtmFormLabel disabled><span>Form Label</span></QtmFormLabel>
API
QtmFormLabel
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 |