InputText

InputText is an extension to standard input element with theming.

Download #


npx volt-vue add InputText

Import #


import InputText from '@/volt/InputText.vue';

Basic #

InputText is used with the v-model property for two-way value binding.


<template>
    <div class="card flex justify-center">
        <InputText v-model="value" />
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<template>
    <div class="card flex justify-center">
        <InputText v-model="value" variant="filled" />
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Sizes #

InputText provides small and large sizes as alternatives to the base.


<template>
    <div class="card flex flex-col items-center gap-4">
        <InputText v-model="value1" type="text" size="small" placeholder="Small" />
        <InputText v-model="value2" type="text" placeholder="Normal" />
        <InputText v-model="value3" type="text" size="large" placeholder="Large" />
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import { ref } from 'vue';

const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>

Help Text #

An advisory text can be defined with the Message component.

Username


<template>
    <div class="card flex justify-center">
        <div class="flex flex-col gap-2">
            <label for="username">Username</label>
            <InputText id="username" v-model="value" aria-describedby="username-help" />
            <Message size="small" severity="secondary" variant="simple">Enter your username to reset your password.</Message>
        </div>
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import Message from '@/volt/Message.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<template>
    <div class="card flex justify-center">
        <div class="flex flex-col gap-1">
            <InputText v-model="value" :invalid="!value" placeholder="Name" />
            <Message v-if="!value" size="small" severity="error" variant="simple">Name is required.</Message>
        </div>
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import Message from '@/volt/Message.vue';
import { ref } from 'vue';

const value = ref(null);
</script>

Disabled #

When disabled is present, the element cannot be edited and focused.


<template>
    <div class="card flex justify-center">
        <InputText v-model="value" disabled placeholder="Disabled" />
    </div>
</template>

<script setup lang="ts">
import InputText from '@/volt/InputText.vue';
import { ref } from 'vue';

const value = ref(null);
</script>