vcl-input-group

Buttons and labels prepended and/ or appended to input fields

Usage no npm install needed!

<script type="module">
  import vclInputGroup from 'https://cdn.skypack.dev/vcl-input-group';
</script>

README

VCL input-group

Buttons and labels prepended and/ or appended to a text input control.

Features

Usage

The button or label and the input field must be wrapped in a div tag with the class vclInputGroup. If a button is prepended or appended, the parent span needs to have the vclInputGroupButton class.

text example

Appending & Prepending

button example

Multiple appended and prepended elements are possible as well.

multiple example

Classes

  • vclInputGroup
  • vclInputGroupButton

Modifiers

Variables

Demo

example.html on GH-pages.