Form
Label
Introduction
The label
component is a small and practical component to use in your forms.
When you set the for
attribute, it'll generate a label
tag for a subsequent
input field with the same id
attribute.
This isn't a component you will usually reach for, as in most cases you will probably
want to use the form-group
component to render the label and errors automatically
for you, but this component is available to use for other use cases you may have.
{note} All labels will be provided an id with Alpine's
$id
magic helper. This helps certain components like custom-select provide accurate accessibility attributes when in a form-group.
Requirements
Since the label makes use of Alpine's $id
magic helper, you will need Alpine.js installed. All labels will get the following attribute applied:
:id="$id('fc-label')"
If the ID is not setting on the label, ensure you are placing the label inside some kind of x-data
scope.
See Third-Party Assets on the installation guide for further setup information.
Basic Usage
The most basic usage of the component is as follows:
<x-label for="first_name" />
It's important to note
that only keys with _
are supported and no camelCased or other variants. You can of course
provide your own label in the default slot:
<x-label for="first_name">My custom label</x-label>
API Reference
props
prop | description |
---|---|
for |
The name (or id) of the input element the label is for. |