The <x-forms::label> component renders form labels with support for required indicators, inline layouts, and floating labels.
Basic Usage
<x-forms::label for="email" label="Email Address" />
<input type="email" id="email" name="email" class="form-control" />
Attributes
The text to display in the label. If empty, no label is rendered (unless blankLabel is true).
The ID of the form element this label is associated with. Enables clicking the label to focus the input.
Displays a required indicator after the label text (asterisk by default).
Applies inline layout classes for horizontal forms.
Removes the form-label class for Bootstrap floating label styling.
inlineLabelClass
string
default:"col-sm-3 col-lg-2 col-form-label"
CSS classes to apply when inline is true. Default comes from framework configuration.
Renders an empty label tag for alignment purposes, even when no label text is provided.
Override the CSS framework for this component.
Required Indicator
Mark fields as required with the required attribute:
<x-forms::label for="username" label="Username" required />
<input type="text" id="username" name="username" class="form-control" />
<label for="username" class="form-label">Username <span class="required">*</span></label>
<x-forms::label-required> component internally and can be customized.
Inline Labels
For horizontal form layouts:
<div class="row mb-3">
<x-forms::label for="email" label="Email" inline />
<div class="col-sm-9 col-lg-10">
<input type="email" id="email" name="email" class="form-control" />
</div>
</div>
<label for="email" class="col-sm-3 col-lg-2 col-form-label">Email</label>
Floating Labels
For Bootstrap 5 floating labels (label appears inside the input):
<div class="form-floating">
<input type="text" id="name" name="name" class="form-control" placeholder="Name" />
<x-forms::label for="name" label="Name" floating />
</div>
floating="true", the label does not include the form-label or inline classes.
Custom Inline Classes
Override the default inline label classes:
<x-forms::label
for="title"
label="Title"
inline
inline-label-class="col-md-4 col-lg-3 col-form-label fw-bold"
/>
Blank Labels
Create empty labels for alignment in inline forms:
<div class="row mb-3">
<x-forms::label blank-label inline />
<div class="col-sm-9 col-lg-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
Label Required Component
Customize the required indicator separately:
<label for="email" class="form-label">
Email Address
<x-forms::label-required />
</label>
<x-forms::label-required text="(required)" />
forms::strings.required_text.
Styling
The label applies these CSS classes by default:
- Standard:
form-label
- Inline:
col-sm-3 col-lg-2 col-form-label (or custom inlineLabelClass)
- Floating: No classes (relies on parent
.form-floating)
Labels are automatically rendered by <x-forms::form-group> and most input components:
<!-- Label is included automatically -->
<x-forms::text name="email" label="Email Address" required />
<div class="mb-3">
<x-forms::label for="custom" label="Custom Field" required />
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" id="custom" name="custom" class="form-control" />
</div>
</div>
Complete Example
<form>
<!-- Standard label -->
<div class="mb-3">
<x-forms::label for="name" label="Full Name" required />
<input type="text" id="name" name="name" class="form-control" />
</div>
<!-- Inline label -->
<div class="row mb-3">
<x-forms::label for="email" label="Email" inline />
<div class="col-sm-9 col-lg-10">
<input type="email" id="email" name="email" class="form-control" />
</div>
</div>
<!-- Floating label -->
<div class="form-floating mb-3">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
<x-forms::label for="password" label="Password" floating required />
</div>
<!-- Blank label for alignment -->
<div class="row mb-3">
<x-forms::label blank-label inline />
<div class="col-sm-9 col-lg-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>