vcl-form-control-label

Labels to describe form controls

Usage no npm install needed!

<script type="module">
  import vclFormControlLabel from 'https://cdn.skypack.dev/vcl-form-control-label';
</script>

README

VCL form-control-label

Label to describe form controls.

Features

  • Basic label and multi line labels.
  • Sub label.
  • Indicator for required form fields.
  • Hints for form controls.

Form control hints are typically used to provide assistance with input validation.

Usage

Basic Usage

basic example

Advanced

Visual indication that the field must be filled in.

label-required example

The sub label is a secondary, more verbose label.

label-sub example

The hint may be used used to suggest a pattern or format.

hint example

Classes

  • vclFormControlLabel:
  • vclFormControlSubLabel
  • vclRequiredIndicator
  • vclFormControlHint

Modifiers

  • vclFormControlLabelWrapping: To be used when the label encloses the control.
  • vclDisabled: Disabled indication that label can be clicked.

Variables

  • --form-control-sublabel-color
  • --form-control-label-line-height
  • --form-control-label-required-hint-color
  • --form-control-hint-color

Demo

example.html on GH-pages.