Form Label

FormLabel 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

<FormLabel><span>Form Label</span></FormLabel>

for attribute

The for attribute specifies the ID of the element that the label is associated with.

React replaces the for attribute with htmlFor to avoid conflicts and ensure compatibility with JavaScript.

Email

<FormLabel htmlFor="text-input-id"><span>Email</span></FormLabel>
<TextInput
  inputProps={{
    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.

Form Label SmallForm Label MediumForm Label Large

<FormLabel size="small"><span>Form Label Small</span></FormLabel>
<FormLabel size="medium"><span>Form Label Medium</span></FormLabel>
<FormLabel size="large"><span>Form Label Large</span></FormLabel>

Required

Add required attribute in form label to put a red required asterisk to the first child of label to indicate that the field is required.

Form Label

<FormLabel required><span>Form Label</span></FormLabel>

Disabled

Add disabled attribute in form label to disable the element.

Form Label

<FormLabel disabled><span>Form Label</span></FormLabel>

API

The FormLabel component accepts all the props a standard <label> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.LabelHTMLAttributes<HTMLLabelElement>. See more about supported HTML props in React's documentation.

Loading API documentation...