Input Group Merge

Merge Group

A slightly modified version of the default input groups that always keeps icons as a part of the form control. Also works with validation.

<b-form-group :description="input && input.length > 0 ? `The model value is: ${input}` : null"
  label="Prepend"
  label-for="prepend01"
  label-class="form-label">
  <fmv-input-group-merge v-model="input"
    name="prepend01"
    placeholder="Input group prepended"
    required
    prepend>
    <md-icon>remove_red_eye</md-icon>
  </fmv-input-group-merge>
</b-form-group>

<b-form-group label="Append"
  label-for="append01"
  label-class="form-label">
  <fmv-input-group-merge name="append01"
    placeholder="Input group appended"
    required
    append>
    <md-icon>lock_outline</md-icon>
  </fmv-input-group-merge>
</b-form-group>

Validation

Input Group Merge supports validation just like other input types.

<b-form-group :state="statePrepend"
  :description="validationPrepend && validationPrepend.length > 0 ? `The model value is: ${validationPrepend}` : null"
  label="Prepend"
  label-for="validation01"
  label-class="form-label"
  invalid-feedback="Please type a value.">
  <fmv-input-group-merge v-model="validationPrepend"
    :state="statePrepend"
    name="validation01"
    placeholder="Input group prepended"
    required
    prepend>
    <md-icon>remove_red_eye</md-icon>
  </fmv-input-group-merge>
</b-form-group>

<b-form-group :state="stateAppend"
  label="Append"
  label-for="validation02"
  label-class="form-label"
  invalid-feedback="Please type a value."
  valid-feedback="All good.">
  <fmv-input-group-merge v-model="validationAppend"
    :state="stateAppend"
    name="validation02"
    placeholder="Input group appended"
    required
    append>
    <md-icon>lock_outline</md-icon>
  </fmv-input-group-merge>
</b-form-group>

<fmv-input-group-merge> Reference

<fmv-input-group-merge> Properties

Property	Type	Default Value
id	String
name	String
disabled	Boolean
required	Boolean	false
prepend	Boolean	false
append	Boolean	false
state	Boolean
form	String
autofocus	Boolean	false
size	String
value	String or Number
aria-invalid	Boolean or String	false
readonly	Boolean	false
plaintext	Boolean	false
autocomplete	String
placeholder	String
formatter	Function
trim	Boolean	false
number	Boolean	false
lazy-formatter	Boolean
type	String	text
no-wheel	Boolean	false
min	String or Number
max	String or Number
step	String or Number
list	String

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset