Label and control wrapper for all form controllers. It handles label spacing, required
indicator, hint text, and error message patterns. Pair with Form Inputs (Controllers)
such as .input, .select, .textarea, .checkbox,
.radio, and .toggle.
Standard text input field with required indicator, hint text, and error state shown together for quick reference.
For use on normal page surfaces (content areas, cards, dialogs)
Use your legal name for the reservation
Please enter a valid email address
<div class="field">
<label class="field__label">Email Address</label>
<div class="field__control">
<input type="email" class="input" placeholder="you@example.com">
</div>
</div>
<div class="field">
<label class="field__label field__label--required">Full Name</label>
<div class="field__control">
<input type="text" class="input" placeholder="Jane Doe" required>
</div>
<p class="field__hint">Use your legal name for the reservation</p>
</div>
<div class="field">
<label class="field__label field__label--required">Email Address</label>
<div class="field__control">
<input type="email" class="input is-error" value="invalid-email">
</div>
<p class="field__error">Please enter a valid email address</p>
</div>For use on dark overlays and hero sections
Use your legal name for the reservation
Please enter a valid email address
<div class="field field--glass">
<label class="field__label">Email Address</label>
<div class="field__control">
<input type="email" class="input input--glass" placeholder="you@example.com">
</div>
</div>
<div class="field field--glass">
<label class="field__label field__label--required">Full Name</label>
<div class="field__control">
<input type="text" class="input input--glass" placeholder="Jane Doe" required>
</div>
<p class="field__hint">Use your legal name for the reservation</p>
</div>
<div class="field field--glass">
<label class="field__label field__label--required">Email Address</label>
<div class="field__control">
<input type="email" class="input input--glass is-error" value="invalid-email">
</div>
<p class="field__error">Please enter a valid email address</p>
</div>Form Field wrapper paired with the select controller. Use for guest count, options, and enumerated choices.
For use on normal page surfaces (content areas, cards, dialogs)
<div class="field">
<label class="field__label field__label--required">Number of Guests</label>
<div class="field__control">
<select class="select" required>
<option value="">Select guests</option>
<option value="1">1 Guest</option>
<option value="2">2 Guests</option>
<option value="4">4 Guests</option>
<option value="6">6 Guests</option>
</select>
</div>
</div>For use on dark overlays and hero sections
<div class="field field--glass">
<label class="field__label field__label--required">Number of Guests</label>
<div class="field__control">
<select class="select select--glass" required>
<option value="">Select guests</option>
<option value="1">1 Guest</option>
<option value="2">2 Guests</option>
<option value="4">4 Guests</option>
<option value="6">6 Guests</option>
</select>
</div>
</div>Multi-line input field for longer notes. Combine with hint text for guidance.
For use on normal page surfaces (content areas, cards, dialogs)
Maximum 500 characters
<div class="field">
<label class="field__label">Message</label>
<div class="field__control">
<textarea class="textarea" rows="4" placeholder="Enter your message..."></textarea>
</div>
<p class="field__hint">Maximum 500 characters</p>
</div>For use on dark overlays and hero sections
Maximum 500 characters
<div class="field field--glass">
<label class="field__label">Message</label>
<div class="field__control">
<textarea class="textarea textarea--glass" rows="4" placeholder="Enter your message..."></textarea>
</div>
<p class="field__hint">Maximum 500 characters</p>
</div>
Use .form-field__option to align checkbox or radio controls with text labels.
Pair the text with DS typography classes.
For use on normal page surfaces (content areas, cards, dialogs)
Select all that apply
<div class="field">
<label class="field__label">Select Options</label>
<div class="field__control">
<label class="form-field__option">
<input type="checkbox" class="checkbox">
<span class="t-body">Option 1 - Regular size</span>
</label>
<label class="form-field__option">
<input type="radio" name="option" class="radio">
<span class="t-body">Option 2 - Radio choice</span>
</label>
</div>
<p class="field__hint">Select all that apply</p>
</div>For use on dark overlays and hero sections
Select all that apply
<div class="field field--glass">
<label class="field__label">Select Options</label>
<div class="field__control">
<label class="form-field__option">
<input type="checkbox" class="checkbox">
<span class="t-body">Option 1 - Regular size</span>
</label>
<label class="form-field__option">
<input type="radio" name="option-glass" class="radio">
<span class="t-body">Option 2 - Radio choice</span>
</label>
</div>
<p class="field__hint">Select all that apply</p>
</div>.field for all form controls.field__label--required for required fields.field__hint for helper text.field__error with controller .is-error.field--glass and glass controllers in overlays.form-field__option for checkbox/radio labels.field__control wrapperForm Field wrapper styles are defined in:
/assets/css/form-field.css
Includes: label spacing, required indicator, hint text, error message styling, glass variants, and checkbox/radio option alignment.