Controller elements only: text input, select, textarea, checkbox, radio, toggle. These are pure form controls without labels or wrappers. Use with Form Field (Wrapper) and Form Layout (Collections) DS items to build complete forms.
Form Inputs are controller elements only. They define visual styling for form controls but do not include labels or wrappers.
Standard text field for user input. Supports various input types (text, email, password, number).
Works in both standard and glassy contexts using dedicated .input and .input--glass classes.
For use on normal page surfaces (content areas, cards, dialogs)
<input type="text" placeholder="Your name" class="input" />
<!-- Email variant -->
<input type="email" placeholder="you@example.com" class="input" />
<!-- Disabled state -->
<input type="text" placeholder="Disabled" class="input" disabled />For use on dark overlays and hero sections
<input type="text" placeholder="Your name" class="input input--glass" />
<!-- Email variant for glassy -->
<input type="email" placeholder="you@example.com" class="input input--glass" />
<!-- Disabled state -->
<input type="password" placeholder="Password" class="input input--glass" disabled />
Dropdown select control for choosing from predefined options.
Use .select for standard contexts and .select--glass for glassy contexts.
For use on normal page surfaces (content areas, cards, dialogs)
<select class="select">
<option>Choose an option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<!-- Disabled state -->
<select class="select" disabled>
<option>Disabled</option>
</select>For use on dark overlays and hero sections
<select class="select select--glass">
<option>Select property type</option>
<option>Cabin</option>
<option>Villa</option>
<option>Cottage</option>
</select>
<!-- Disabled state -->
<select class="select select--glass" disabled>
<option>Disabled</option>
</select>
Multi-line text input for larger text content like messages or descriptions.
Use .textarea for standard contexts and .textarea--glass for glassy contexts.
For use on normal page surfaces (content areas, cards, dialogs)
<textarea class="textarea" placeholder="Enter your message..." rows="4"></textarea>
<!-- No-resize variant -->
<textarea class="textarea textarea--no-resize" placeholder="Fixed size" rows="5"></textarea>
<!-- Disabled state -->
<textarea class="textarea" placeholder="Disabled" disabled></textarea>For use on dark overlays and hero sections
<textarea class="textarea textarea--glass" placeholder="Tell us about your inquiry..." rows="5"></textarea>
<!-- No-resize variant -->
<textarea class="textarea textarea--glass textarea--no-resize" rows="4"></textarea>
<!-- Disabled state -->
<textarea class="textarea textarea--glass" disabled></textarea>
Custom-styled checkbox for binary selections. Single or multiple checkboxes can be grouped.
Use .checkbox for standard contexts and .checkbox--glass for glassy contexts.
Typically wrapped in Form Field with .form-field__option for label layout.
For use on normal page surfaces (content areas, cards, dialogs)
<label class="form-field__option">
<input type="checkbox" class="checkbox" />
<span>I agree to the terms</span>
</label>
<!-- Checked state -->
<label class="form-field__option">
<input type="checkbox" class="checkbox" checked />
<span>Checked checkbox</span>
</label>
<!-- Disabled state -->
<label class="form-field__option">
<input type="checkbox" class="checkbox" disabled />
<span>Disabled</span>
</label>For use on dark overlays and hero sections
<label class="form-field__option">
<input type="checkbox" class="checkbox checkbox--glass" />
<span>Pet-friendly property</span>
</label>
<!-- Checked state -->
<label class="form-field__option">
<input type="checkbox" class="checkbox checkbox--glass" checked />
<span>Amenities included</span>
</label>
<!-- Disabled state -->
<label class="form-field__option">
<input type="checkbox" class="checkbox checkbox--glass" disabled />
<span>Disabled</span>
</label>
Custom-styled radio button for single-selection from a group. Always use multiple radios with the same name attribute.
Use .radio for standard contexts and .radio--glass for glassy contexts.
Typically wrapped in Form Field with .form-field__option for label layout.
For use on normal page surfaces (content areas, cards, dialogs)
<label class="form-field__option">
<input type="radio" name="accommodation" class="radio" checked />
<span>Cabin</span>
</label>
<label class="form-field__option">
<input type="radio" name="accommodation" class="radio" />
<span>Villa</span>
</label>
<!-- Disabled state -->
<label class="form-field__option">
<input type="radio" name="accommodation" class="radio" disabled />
<span>Disabled</span>
</label>For use on dark overlays and hero sections
<label class="form-field__option">
<input type="radio" name="stay_type" class="radio radio--glass" checked />
<span>Weekend getaway</span>
</label>
<label class="form-field__option">
<input type="radio" name="stay_type" class="radio radio--glass" />
<span>Extended stay</span>
</label>
<!-- Disabled state -->
<label class="form-field__option">
<input type="radio" name="stay_type" class="radio radio--glass" disabled />
<span>Disabled</span>
</label>
Toggle switch for on/off selections. Binary choice control.
Use .toggle for standard contexts and .toggle--glass for glassy contexts.
Combine with .toggle__label for label text.
For use on normal page surfaces (content areas, cards, dialogs)
<!-- Checked state -->
<label class="toggle">
<input type="checkbox" class="toggle__input" checked />
<span class="toggle__switch"></span>
<span class="toggle__label">Notifications enabled</span>
</label>
<!-- Unchecked state -->
<label class="toggle">
<input type="checkbox" class="toggle__input" />
<span class="toggle__switch"></span>
<span class="toggle__label">Marketing emails</span>
</label>
<!-- Disabled state -->
<label class="toggle">
<input type="checkbox" class="toggle__input" disabled />
<span class="toggle__switch"></span>
<span class="toggle__label">Disabled</span>
</label>For use on dark overlays and hero sections
<!-- Checked state -->
<label class="toggle toggle--glass">
<input type="checkbox" class="toggle__input" checked />
<span class="toggle__switch"></span>
<span class="toggle__label">Pet-friendly</span>
</label>
<!-- Unchecked state -->
<label class="toggle toggle--glass">
<input type="checkbox" class="toggle__input" />
<span class="toggle__switch"></span>
<span class="toggle__label">Self-catering available</span>
</label>
<!-- Disabled state -->
<label class="toggle toggle--glass">
<input type="checkbox" class="toggle__input" disabled />
<span class="toggle__switch"></span>
<span class="toggle__label">Disabled</span>
</label>Form input controller CSS is organized into separate semantic files:
/assets/css/input.css — Text input styling/assets/css/select.css — Select dropdown styling/assets/css/textarea.css — Textarea styling/assets/css/checkbox.css — Checkbox styling/assets/css/radio.css — Radio button styling/assets/css/form-field.css — Label/wrapper patterns (separate DS item)/assets/css/form-layout.css — Multi-field layout patterns (separate DS item)
All files are imported in ui-system.css and deployed with no build step required.