Input

Component source on Github This page on Github

Reference

v-modelempty string
StringNumberArrayBooleanNumber
Inputs v-model
base"input"
String
Base name used to style component
clearablefalse
Boolean
Adds an 'X' button that resets model to the default value
close-button
(attributes)
{}
Object
Attributes of the inputs v-close-button component (clear button)
custom-clearablefalse
Boolean
Adds an 'X' button that only emits the click:clear-button event. It does not modify model value
form-text
(attributes)
{ "class": "absolute" }
Object
Attributes of the v-form-text component (validation messages)
iconempty string
StringObject
Adds an icon to the input element. Valid value is the same as in v-icon components
inlinefalse
Boolean
Sets inputs display to inline
is-loadingfalse
Boolean
If true displays a spinner in the input. Spinner should be first enabled in the use-loading prop
labelempty string
String
Label on top of the input. This label is for simple forms as position cannot be changed
mod-close-button-wrapperempty string
String
Style of the wrapper element of the clear button
mod-iconempty string
String
Style of the icon element
mod-inputempty string
String
Style of the main input element
mod-labelempty string
String
Style of the label element
nameempty string
String
Name of the component
no-messagesfalse
Boolean
If true validation messages are not displayed
roleundefined
String
rules[]
Object
Rules for validation. See Form Validation for examples of rules
single-line-messagefalse
Boolean
Limits the number of displayed errors to one at a time. Order of the messages is the same as order of the rules in rules prop
spinner
(attributes)
{}
Object
Attributes of the inputs v-spinner component (loader)
use-loaderfalse
Boolean
Enable or disable the spinner in the input
validate-mode"silent"
String
Valid values are 'silent' or 'eager'. See Form Validation for explanation and examples
validate-on"blur"
String
Valid values are 'blur', 'immediate' or 'form'. See Form Validation for explanation and examples
validation-statenull
String
Overrides state of input validity. Supported values are 'valid', 'invalid', empty string for default state or null for component controlled state
variantempty string
String
Active variant of the element mod-* props
widthempty string
String
Width of the component in px
Events
update:modelValue
Updates v-model of component
validation:status
Emmited after input validation. Event data contain object with validation result details
validation:messages
Emmited after input validation. Event data contains validation messages or errors
validation:state
Emmited after input validation. Event data contains validation state
click:clear-button
Emitted after clicking clear button (if the custom-clearable prop is set)
click:icon
Emitted after clicking input icon
click:indicator
Emitted after clicking input indicator
Slots
label
Slot for the label. Slot props: label (from label prop)
icon
Slot for the icon
prepend
Slot for the content prepending input
append
Slot for the content appending input

Example - simple input

    <template>
  <div class="w-full md:w-1/2">
    <v-input
      v-model="model"
      type="text"
      label="Username"
      placeholder="Type something..."
    ></v-input>
  </div>
</template>
  

    
  

  
    <script setup>
import { ref } from "vue";

let model = ref("");
</script>

Example - props and events

text
false
false
false
false
    <template>
  <div class="w-full md:w-1/2">
    <v-input
      v-model="example.model"
      v-bind="example"
      icon="b-exclamation-circle"
      placeholder="Type something..."
      @click:clear-button="handleClickClear"
      @click:icon="handleClickIcon"
    ></v-input>
  </div>

</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";

let example = reactive({
  model: "",
  type: "text",
  label: "",
  clearable: false,
  customClearable: false,
  useLoader: false,
  isLoading: false,
});

let events = ref([]);

let handleClickClear = (ev) => {
  // example.model = "";
  events.value.unshift({ ev: "click:clear-button", data: ev });
};

let handleClickIcon = () => {
  events.value.unshift({ ev: "click:icon" });
};
</script>

Example - prepend, append and icon slots

http://
.com
    <template>
  <div class="flex flex-col gap-y-4 w-full md:w-1/2">
    <v-input
      v-model="model"
      :inline="false"
      placeholder="Type something..."
    >
      <template #prepend>
        <div class="mr-2">http://</div>
      </template>
    </v-input>

    <v-input
      v-model="model"
      :inline="false"
      placeholder="Type something..."
    >
      <template #append>
        <div class="ml-2">.com</div>
      </template>
    </v-input>

    <v-input
      v-model="model"
      placeholder="Type something..."
    >
      <template #icon>
        <v-icon
          name="b-exclamation-circle"
          class="h-6 w-6 text-gray-400 dark:text-gray-400 mr-2"
        ></v-icon>
      </template>
    </v-input>
  </div>
</template>
  

    
  

  
    <script setup>
import { ref, reactive } from "vue";

let model = ref("");
</script>

Example - alternative styles

    <template>
  <!-- underlined -->

  <div class="flex flex-col md:flex-row gap-y-6 md:gap-x-10">
    <v-input
      v-model="example"
      base="underlinedInput"
      placeholder="Type something..."
    ></v-input>

    <!-- rounded -->

    <v-input
      v-model="example"
      base="roundedInput"
      placeholder="Type something..."
    ></v-input>
  </div>
</template>
  

    
  

  
    <script setup>
import { ref } from "vue";

let example = ref("");
</script>

Example - group styling

Input elements can be styled depending on the state of wrapper element with tailwind group-* modifiers. In the example clear button appears on hover and icon appears after input is focused.

    <template>
  <v-input
    v-model="model"
    type="text"
    inline
    icon="b-exclamation-circle"
    clearable
    mod-close-button-wrapper="effect:showOnHover"
    mod-icon="effect:showOnFocus"
    placeholder="Type something..."
  ></v-input>
</template>
  

    
  

  
    <script setup>
import { ref } from "vue";

let model = ref("");
</script>