Form components

AdminLTE Vue ships a small set of form controls that wrap Bootstrap 5.3 markup with v-model support, optional labels, validation feedback and consistent sizing. The components are LteInput, LteSelect, LteTextarea, LteInputSwitch and LteButton. Every control forwards unknown attributes to the underlying element, so native attributes like name, autocomplete or maxlength work as expected.

LteInput

A labelled text input that supports input-group prepend/append addons and inline validation.

<script setup lang="ts">
import { ref } from 'vue'

const email = ref('')
const amount = ref('')
</script>

<template>
  <LteInput v-model="email" label="Email" type="email" placeholder="[email protected]" required />

  <LteInput
    v-model="amount"
    label="Amount"
    prepend="$"
    append=".00"
    group-size="lg"
  />

  <LteInput v-model="email" label="Email" error="This field is required." />
</template>

When prepend, append or error is set, the input is wrapped in a Bootstrap input-group. The error string renders as .invalid-feedback and applies is-invalid to the field. The default slot renders below the field (useful for help text).

Props

Emits

Slots

LteSelect

A labelled form-select supporting single or multiple selection. Options can come from the options prop or the default slot.

<script setup lang="ts">
import { ref } from 'vue'

const country = ref('us')
const tags = ref<string[]>([])

const countries = [
  { value: 'us', label: 'United States' },
  { value: 'lv', label: 'Latvia' },
]
</script>

<template>
  <LteSelect v-model="country" label="Country" :options="countries" />

  <LteSelect v-model="tags" label="Tags" multiple :options="countries" />

  <!-- Custom options via the default slot -->
  <LteSelect v-model="country" label="Country">
    <option value="us">United States</option>
    <option value="lv">Latvia</option>
  </LteSelect>
</template>

With multiple, modelValue is an array of the selected option values.

Props

Emits

Slots

LteTextarea

A labelled multi-line text control.

<script setup lang="ts">
import { ref } from 'vue'

const bio = ref('')
</script>

<template>
  <LteTextarea v-model="bio" label="Bio" :rows="6" placeholder="Tell us about yourself" />
</template>

Props

Emits

LteInputSwitch

A Bootstrap switch (form-switch) bound to a boolean.

<script setup lang="ts">
import { ref } from 'vue'

const notifications = ref(true)
</script>

<template>
  <LteInputSwitch v-model="notifications" label="Email notifications" />
</template>

Props

Emits

LteButton

A themed Bootstrap button with optional icon and block layout.

<template>
  <LteButton theme="primary" label="Save" />
  <LteButton theme="danger" outline icon="trash" label="Delete" />
  <LteButton type="submit" theme="success" size="lg" block>
    Submit
  </LteButton>
</template>

The icon value is passed through the biClass() helper (Bootstrap Icons). When a label or default slot is present, the icon gets a trailing me-1 margin. The default slot overrides the label prop.

Props

Slots