v1.0
Label
A accessible label associated with controls like inputs & switches.
A native label that can be associated with any input using html for attribute.
Works with any native html form.
Set htmlFor: Set the html for property to the id of the control prefab/ input that the label is describing.
Test: To test click the label and it should set the control/input to a focus state.
Done: That is it! You are all set to use this prefab.
Use the label prefab for user interface items, such as input fields, checkboxes, and radio buttons. The considerations for using the <label> tag are:
Accessibility: It improves web accessibility by providing screen reader users with contextual information about the input field, enhancing the form's usability for people with visual impairments.
Usability: Clicking on the label text focuses on or activates the associated input element, which can make it easier to select small form elements like checkboxes and radio buttons, improving the user experience.
Clarity: Labels clarify the purpose of the input fields to users, ensuring that forms are easy to understand and use.
Semantic HTML: Using <label> is a best practice that contributes to clean, semantic HTML, helping with search engine optimization (SEO) and maintainability of the code.
Property
Description
htmlFor
The id the interface item the label will be describing.
As Tag
Allows you to pass a layer with text to be used in the label tag.
Instance
The component or layer instance you will pass to be used in label.
Text
The text value of the label.
Styles
The font styles and color of the label.