BUIIFormGroup

This is the easiest way to build a form field: The component provides properties for label, help text, required field indicator, error message and character counter.

Demo

Label do campo *

Code

<template>
  <bui-form-group
    label="Label do campo"
    help="Texto de ajuda"
    :required="true"
  >
    <b-form-input type="text" />
    <template #actions>
      <button>
        <bui-icon
          name="copy"
          size="16"
          variant="gray"
        />
      </button>
    </template>
  </bui-form-group>
</template>

Sandbox

My label *

builderall

10/20

Code

<template>
  <div>
    <div class="mb-3 bui-form-group-sandbox">
      <b-form-input
        v-model="input.label"
        placeholder="Label"
      />
      <b-form-input
        v-model="input.help"
        placeholder="Help text"
      />
      <b-form-input
        v-model="input.error"
        placeholder="Digite um erro!"
      />
      <b-form-checkbox
        v-model="input.required"
        :value="true"
        :unchecked-value="false"
      />
    </div>

    <bui-form-group
      :label="input.label"
      :help="input.help"
      :required="input.required"
      :error="input.error"
      :value="input.value"
      :max-chars="20"
    >
      <b-form-textarea
        v-model="input.value"
        placeholder="Description"
        rows="6"
      />
    </bui-form-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: {
        label: 'My label',
        help: 'Help do tooltip',
        required: true,
        error: '',
        value: 'builderall',
        maxChars: 20
      }
    }
  }
}
</script>

API Reference

Props

Property	Type	Default	Description
label	String	undefined	Field label
help	String	undefined	Help text that appears in the tooltip
required	Boolean	false	If required, an * will be displayed
error	String	''	Field-related error. If informed, the field gets error context (red borders) and the error shown below
max-chars	Number	null	If informed, a character counter will be displayed as the user fills in the field
value	{Number, Object, String}	undefined	Reference value to compare with maximum number of characters

Slots

Name	Description
default	Slot for the input
actions	Slot for placing action icons inside the input