VxInputGroup

src/components/vx-input-group/VxInputGroup.vue

Form low 7 usos Funcional

Componente funcional (stateless) de layout que agrupa um input com elementos prepend e/ou append em uma única linha visual. Cria o padrão input-group do Bootstrap: [prepend][input][append] com bordas conectadas. Frequentemente usado para adicionar botões ou texto ao lado de inputs.

Wrapper de Input

Padrão mais comum — só o slot default preenchido. Funciona como container flex com espaçamento consistente entre campos de formulário. É a variante dominante no codebase (7 usos, a maioria sem prepend/append).

Nome do Cargo

Permissões

Descrição

<vx-input-group class="mb-5">
  <vs-input
    label="Nome do Cargo"
    v-model="role.display_name"
    class="w-full"
    name="Nome do Cargo"
    v-validate="'required'"
    :danger="errors.has('Nome do Cargo')"
    :danger-text="errors.first('Nome do Cargo')"
  />
</vx-input-group>

Botão Append

Input com botão no lado direito via slot append. Usar .append-text.btn-addon na div wrapper para conectar visualmente o botão ao input — ajusta border-radius, altura e padding automaticamente.

Slot append com .append-text.btn-addon

<vx-input-group class="mb-base mr-3">
  <vs-input v-model="mailTo" placeholder="Email" />

  <template slot="append">
    <div class="append-text btn-addon">
      <vs-button type="border" @click="mailTo = ''" class="whitespace-no-wrap">
        Send Invoice
      </vs-button>
    </div>
  </template>
</vx-input-group>

Texto Prepend

Badge/label fixo no lado esquerdo do input. Usar .prepend-text no elemento dentro do slot prepend para aplicar fundo colorido, border-radius esquerdo e borda unificada.

https://

URL prefix

Handle prefix (neutral)

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-input-group>
  <template slot="prepend">
    <div class="prepend-text">
      <span>https://</span>
    </div>
  </template>
  <vs-input v-model="url" placeholder="dominio.com.br" />
</vx-input-group>

Texto Append

Badge/label fixo no lado direito do input. Usar .append-text no elemento dentro do slot append.

BRL

Unidade monetária

Percentual (neutral)

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-input-group>
  <vs-input v-model="price" type="number" placeholder="0,00" />
  <template slot="append">
    <div class="append-text">
      <span>BRL</span>
    </div>
  </template>
</vx-input-group>

Botão Prepend

Botão no lado esquerdo do input. Usar .btn-addon na div wrapper do slot prepend para ajustar height e padding.

Slot prepend com .prepend-text.btn-addon

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-input-group>
  <template slot="prepend">
    <div class="prepend-text btn-addon">
      <vs-button type="border" @click="search">Buscar</vs-button>
    </div>
  </template>
  <vs-input v-model="query" placeholder="Pesquisar..." />
</vx-input-group>

Prepend e Append Simultâneos

Texto/badge nos dois lados. O input central perde border-radius em ambas as extremidades, criando um bloco visual unificado.

,00

Valor monetário com prefixo e sufixo

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-input-group>
  <template slot="prepend">
    <div class="prepend-text">
      <span>R$</span>
    </div>
  </template>
  <vs-input v-model="amount" type="number" placeholder="0,00" />
  <template slot="append">
    <div class="append-text">
      <span>,00</span>
    </div>
  </template>
</vx-input-group>

API

Componente Funcional (stateless) — Sem estado interno, sem ciclo de vida Vue. Layout puro via slots e CSS.

<!-- Exemplo com principais props -->
<vx-input-group class="mb-5" prepend-classes="bg-primary" append-classes="">
  <template slot="prepend">
    <div class="prepend-text">Label</div>
  </template>

  <vs-input v-model="value" class="w-full" />

  <template slot="append">
    <div class="append-text btn-addon">
      <vs-button>Ação</vs-button>
    </div>
  </template>
</vx-input-group>

Props

Nome	Tipo	Default	Obrig.	Descrição
`prependClasses`	String	—	Não	Classes CSS extras para o wrapper `.vx-input-group-prepend`.
`appendClasses`	String	—	Não	Classes CSS extras para o wrapper `.vx-input-group-append`.

Slots

Nome	Descrição
`default`	Conteúdo central (normalmente um `vs-input` ou `vs-textarea`). Sempre renderizado com `flex-grow` — ocupa o espaço restante entre prepend e append.
`prepend`	Elemento no lado esquerdo (texto, botão, ícone). Condicional — só renderiza se preenchido. Border-radius esquerdo, sem radius direito para conectar ao input.
`append`	Elemento no lado direito (texto, botão, ícone). Condicional — só renderiza se preenchido. Border-radius direito, sem radius esquerdo para conectar ao input.

Classes CSS do consumidor

Classe	Onde usar	Efeito
`.prepend-text`	Conteúdo do slot `prepend`	Padding 0 1rem, cor branca, border-radius 6px. Fundo colorido pelo CSS pai.
`.append-text`	Conteúdo do slot `append`	Mesma lógica do `.prepend-text`, lado direito.
`.btn-addon`	Em `.prepend-text` ou `.append-text` quando conteúdo é botão	Remove border-radius das extremidades adjacentes ao input; `height: 100%`, `padding: 0 1.5rem`.

Dependências

SCSS: src/assets/scss/vuexy/components/vxInputGroup.scss

Onde é usado

src/views/relationship-rules-categories/New.vue

src/views/roles/RolesForm.vue

src/views/customer-bases/CustomerBasesForm.vue

src/views/instances/InstancesList.vue

src/views/pages/Invoice.vue