Powered by dead simple CSS props and a mix of common convention rules.
<label/> elements in web development provide a user-friendly way to associate
descriptive text with form controls, such as input elements. By clicking
on a label, users can focus on the corresponding input element, enhancing
accessibility and usability. Labels ensure that forms are easily
understandable and navigable.
<label>
label
</label>
| prop | description | requires |
|---|---|---|
| - - field | changes label behaviour to act as a field wrapper for form elements | - |
<label data-props='--field'>
<span>label</span>
<input type="text"/>
</label>
| prop | description | requires |
|---|---|---|
| - - label | defines children as field label | - |
| - - caption | defines children as field caption | - |
<label data-props='--field'>
<span data-props='--label'>label</span>
<input type="text"/>
<span data-props='--caption'>caption</span>
</label>