Vertical 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/_vertical-labels.scss
- Include the Sass file in theme.scss:
@use "components/vertical-labels";
Implementation
- Use a wrapper element with
class="vertical-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:
Label with icon:
Label with right aligned icon link:
Label with right aligned text link:
Label with icon and right aligned text link:
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):