import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as o}from"./chunks/FwbInput.vue_vue_type_script_setup_true_lang.a210c4c5.js";import{d as E,h as y,o as e,c as i,H as l,l as p,b as m,w as u,a as F,k as d,Q as t}from"./chunks/framework.3f630664.js";import{_ as q}from"./chunks/FwbA.vue_vue_type_script_setup_true_lang.693a0ec3.js";import{_ as g}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import"./chunks/index.b15c605d.js";import"./chunks/index.6b4d4439.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const C={class:"vp-raw"},h=E({__name:"FwbInputExample",setup(r){const s=y("");return(c,a)=>(e(),i("div",C,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},null,8,["modelValue"])]))}}),f={class:"vp-raw grid gap-2"},b=E({__name:"FwbInputExampleSize",setup(r){const s=y("");return(c,a)=>(e(),i("div",f,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Small",placeholder:"enter your name",size:"sm"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),label:"Medium",placeholder:"enter your name",size:"md"},null,8,["modelValue"]),l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[2]||(a[2]=n=>s.value=n),label:"Large",placeholder:"enter your name",size:"lg"},null,8,["modelValue"])]))}}),_=E({__name:"FwbInputExampleDisabled",setup(r){const s=y("");return(c,a)=>(e(),m(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),disabled:"",label:"First name",placeholder:"enter your first name"},null,8,["modelValue"]))}}),v={class:"vp-raw"},B=E({__name:"FwbInputExampleHelper",setup(r){const s=y("");return(c,a)=>(e(),i("div",v,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name"},{helper:u(()=>[F(" We'll never share your details. Read our "),l(p(q),{href:"#",color:"text-blue-600 dark:text-blue-500"},{default:u(()=>[F(" Privacy Policy ")]),_:1}),F(". ")]),_:1},8,["modelValue"])]))}}),w={class:"vp-raw"},A=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),D=E({__name:"FwbInputExamplePrefix",setup(r){const s=y("");return(c,a)=>(e(),i("div",w,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query"},{prefix:u(()=>[A]),_:1},8,["modelValue"])]))}}),k={class:"vp-raw"},x=d("svg",{"aria-hidden":"true",class:"w-5 h-5 text-gray-500 dark:text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[d("path",{d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})],-1),S=E({__name:"FwbInputExampleSuffix",setup(r){const s=y("");return(c,a)=>(e(),i("div",k,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"Search",placeholder:"enter your search query",size:"lg"},{prefix:u(()=>[x]),suffix:u(()=>[l(p(g),null,{default:u(()=>[F("Search")]),_:1})]),_:1},8,["modelValue"])]))}}),V={class:"vp-raw"},T=E({__name:"FwbInputExampleRequired",setup(r){const s=y("");return(c,a)=>(e(),i("div",V,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),label:"First name",placeholder:"enter your first name",required:""},null,8,["modelValue"])]))}}),I={class:"vp-raw"},P=d("hr",{class:"mt-4 border-0"},null,-1),z=E({__name:"FwbInputExampleValidation",setup(r){const s=y("");return(c,a)=>(e(),i("div",I,[l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[0]||(a[0]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"success"},null,8,["modelValue"]),P,l(p(o),{modelValue:s.value,"onUpdate:modelValue":a[1]||(a[1]=n=>s.value=n),required:"",placeholder:"enter your email address",label:"Email","validation-status":"error"},{validationMessage:u(()=>[F(" Please enter a valid email address ")]),_:1},8,["modelValue"])]))}}),$=t('

Vue Input - Flowbite

Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types

TIP

Original reference: https://flowbite.com/docs/forms/input-field/

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.

Default

',7),R=t(`

vue

<template>
  <fwb-input
    v-model="name"
    placeholder="enter your first name"
    label="First name"
  />
</template>

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

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

<template>
  <fwb-input
    v-model="name"
    placeholder="enter your first name"
    label="First name"
  />
</template>

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

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

Size

`,2),N=t(`

vue

<template>
  <fwb-input v-model="name" label="Small" placeholder="enter your name" size="sm" />
  <fwb-input v-model="name" label="Medium" placeholder="enter your name" size="md" />
  <fwb-input v-model="name" label="Large" placeholder="enter your name" size="lg" />
</template>

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

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

<template>
  <fwb-input v-model="name" label="Small" placeholder="enter your name" size="sm" />
  <fwb-input v-model="name" label="Medium" placeholder="enter your name" size="md" />
  <fwb-input v-model="name" label="Large" placeholder="enter your name" size="lg" />
</template>

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

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

Disabled

`,2),M=t(`

vue

<template>
  <fwb-input
    v-model="name"
    disabled
    label="First name"
    placeholder="enter your first name"
  />
</template>

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

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

<template>
  <fwb-input
    v-model="name"
    disabled
    label="First name"
    placeholder="enter your first name"
  />
</template>

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

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

Required

`,2),U=t(`

vue

<template>
  <fwb-input
    v-model="name"
    label="First name"
    placeholder="enter your first name"
    required
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbInput } from 'flowbite-vue'

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

<template>
  <fwb-input
    v-model="name"
    label="First name"
    placeholder="enter your first name"
    required
  />
</template>

<script setup>
import { ref } from 'vue'
import { FwbInput } from 'flowbite-vue'

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

Slot - Helper

`,2),j=t(`

vue

<template>
  <fwb-input
    v-model="name"
    label="First name"
    placeholder="enter your first name"
  >
    <template #helper>
      We'll never share your details. Read our
      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
        Privacy Policy
      </fwb-a>.
    </template>
  </fwb-input>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FwbA, FwbInput } from 'flowbite-vue'

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

<template>
  <fwb-input
    v-model="name"
    label="First name"
    placeholder="enter your first name"
  >
    <template #helper>
      We'll never share your details. Read our
      <fwb-a href="#" color="text-blue-600 dark:text-blue-500">
        Privacy Policy
      </fwb-a>.
    </template>
  </fwb-input>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FwbA, FwbInput } from 'flowbite-vue'

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

Slot - Prefix

`,2),H=t(`

vue

<template>
  <fwb-input v-model="name" label="Search" placeholder="enter your search query">
    <template #prefix>
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      </svg>
    </template>
  </fwb-input>
</template>

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

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

<template>
  <fwb-input v-model="name" label="Search" placeholder="enter your search query">
    <template #prefix>
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      </svg>
    </template>
  </fwb-input>
</template>

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

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

Slot - Suffix

`,2),L=t(`

vue

<template>
  <fwb-input
    v-model="query"
    label="Search"
    placeholder="enter your search query"
    size="lg"
  >
    <template #prefix>
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      </svg>
    </template>
    <template #suffix>
      <fwb-button>Search</fwb-button>
    </template>
  </fwb-input>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FwbButton, FwbInput } from 'flowbite-vue'

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

<template>
  <fwb-input
    v-model="query"
    label="Search"
    placeholder="enter your search query"
    size="lg"
  >
    <template #prefix>
      <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
      </svg>
    </template>
    <template #suffix>
      <fwb-button>Search</fwb-button>
    </template>
  </fwb-input>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FwbButton, FwbInput } from 'flowbite-vue'

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

Slot - Validation

Set validation status via validationStatus prop, which accepts 'success' or 'error'.
Add validation message via validationMessage slot.

`,3),O=t(`

vue

<template>
  <fwb-input
    v-model="email"
    required
    placeholder="enter your email address"
    label="Email"
    validation-status="success"
  />
  <hr class="mt-4 border-0">
  <fwb-input
    v-model="email"
    required
    placeholder="enter your email address"
    label="Email"
    validation-status="error"
  >
    <template #validationMessage>
      Please enter a valid email address
    </template>
  </fwb-input>
</template>

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

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

<template>
  <fwb-input
    v-model="email"
    required
    placeholder="enter your email address"
    label="Email"
    validation-status="success"
  />
  <hr class="mt-4 border-0">
  <fwb-input
    v-model="email"
    required
    placeholder="enter your email address"
    label="Email"
    validation-status="error"
  >
    <template #validationMessage>
      Please enter a valid email address
    </template>
  </fwb-input>
</template>

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

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

`,1),ns=JSON.parse('{"title":"Vue Input - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/input.md","filePath":"components/input.md"}'),W={name:"components/input.md"},ls=Object.assign(W,{setup(r){return(s,c)=>(e(),i("div",null,[$,l(h),R,l(b),N,l(_),M,l(T),U,l(B),j,l(D),H,l(S),L,l(z),O]))}});export{ns as __pageData,ls as default};

Vue Input - Flowbite ​

Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types ​

Default ​

Size ​

Disabled ​

Required ​

Slot - Helper ​

Slot - Prefix ​

Slot - Suffix ​

Slot - Validation ​