Form Label
FormLabel element needs to describe the purpose of the form field. Whenever possible, use the label element to associate text with form elements explicitly.
<FormLabel>Form Label</FormLabel>
For attribute
The for attribute refers to the id of the element this label is associated with.
<FormLabel for="text-input-id">Email</FormLabel>
<TextInput id="text-input-id" placeholder="Enter email" />
Sizes
Control the size of a form label setting size attribute to small, medium or large value. By default, the label has size medium.
<FormLabel size="small">Form Label Small</FormLabel>
<FormLabel size="medium">Form Label Medium</FormLabel>
<FormLabel size="large">Form Label Large</FormLabel>
Required
Add required attribute in form label to put a red required asterisk to indicate that the field is required.
<FormLabel required><span>Form Label</span></FormLabel>
Disabled
Add disabled attribute in form label to disable the element.
<FormLabel disabled>Form Label</FormLabel>
Custom Classes
Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).
<FormLabel classes="text-purple-500 font-bold">Custom styled label</FormLabel>
Event handling
Not applicable. The FormLabel component is a visual element that displays a label for form inputs and does not support any event handlers directly.
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 |