Horizontal labels Optional
Styles for text labels related to form elements.
Features
- CSS only, no Javascript.
- Works with all variants of basic form elements.
- Supports advanced input box.
Configuration
- Sass file: components/_horizontal-labels.scss
- Include the Sass file in theme.scss:
@use "components/horizontal-labels";
Implementation
- Use a wrapper element with
class="horizontal-label". - Place the
<label>inside the wrapper element, followed by a paragraph (<p>) containing the input element. - The label should have a
forattribute (referencing the input element).
Examples
Text input:
Multiple text inputs with labels of different length:
Label with icon:
Text input with icon label:
Text input with icon label and icon link:
Text input with validation:
Select:
Textarea with icon label:
Tag list (advanced input box):
Multiple select (advanced input box):
Collapse
On small screens: The label is placed above the paragraph.
Alignment