Example Wiki

Class: FormLabel

Description: The FormLabel component is a React component that renders a <label> element for form fields. It provides styling and accessibility features to enhance the user experience.

Props:

• className (string): Optional. Additional CSS classes to apply to the label.
• children (node): Required. The content of the label, typically the text describing the form field.
• labelHidden (boolean): Optional. Sets the screen-reader class to the label if true, making it visually hidden but accessible to screen readers.
• id (string): Optional. The id attribute of the label, which should correspond to the id of the form field it relates to.

Example:

<FormLabel id="firstName">First Name:</FormLabel>
<input type="text" id="firstName" />

This example renders a label with the text "First Name:" and assigns it an id of "firstName". The associated form field (an input field in this case) also has the id "firstName", establishing a clear relationship between the label and the field for accessibility.

Considerations:

• Always ensure the id attribute of the FormLabel component matches the id of the corresponding form field for proper accessibility.
• Use the labelHidden prop when you want to display the label visually but not include it in the form field's layout, for instance, in a single-line form layout with a placeholder.
• Consider using FormLabel as part of a form component or library for a more structured and consistent approach to form design.