Overlay labels Optional
Styles for text labels related to form elements.
Features
- CSS only, no Javascript.
- Influenced by Material design.
- Works with all variants of basic form elements.
- Works with form validation.
- Supports advanced input box.
Configuration
- Sass file: components/_overlay-labels.scss
- Include the Sass file in theme.scss:
@use "components/overlay-labels";
Implementation
- Use a wrapper element with
class="overlay-label". - Input elements must have a
placeholderattribute (space or text). The placeholder text will be hidden, but is needed for toggling state. - Put the label text in a
<span>tag as a sibling node after the input element.
Examples
Text input:
Text input with value:
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):