Vitral 0.2
Form

InputText

A single-line text box whose attributes land on the native input, with prefix and suffix content and a clear button.

WAI-ARIA tested

Import

main.ts
import { InputText } from '@vitral/vue';

Basic

Typed: —
<script setup lang="ts">import { InputText, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const name = ref('');</script> <template>    <StackPanel spacing="0.375rem" style="min-width: 16rem">        <Label for="it-name">Name</Label>        <InputText id="it-name" v-model="name" placeholder="Your name" aria-describedby="it-name-hint" />        <small id="it-name-hint" style="color: var(--vt-text-muted-color)">Typed: {{ name || '—' }}</small>    </StackPanel></template>

Adornments and clear button

Content inside the field on either side, and the clear button.

R$BRL
<script setup lang="ts">import { Icon, InputText, Label, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const email = ref('ada@example.com');const price = ref('1299.90');</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="it-email">Email</Label>            <InputText id="it-email" v-model="email" type="email" clearable>                <template #prefix><Icon icon="user" /></template>            </InputText>        </StackPanel>        <StackPanel spacing="0.375rem" style="min-width: 16rem">            <Label for="it-price">Price</Label>            <InputText id="it-price" v-model="price" inputmode="decimal">                <template #prefix>R$</template>                <template #suffix>BRL</template>            </InputText>        </StackPanel>    </StackPanel></template>

Sizes, variants and states

<script setup lang="ts">import { InputText } from '@vitral/vue';</script> <template>    <InputText placeholder="Small" size="small" aria-label="Small" />    <InputText placeholder="Normal" aria-label="Normal" />    <InputText placeholder="Large" size="large" aria-label="Large" />    <InputText placeholder="Filled" variant="filled" aria-label="Filled" />    <InputText placeholder="Invalid" invalid aria-label="Invalid" />    <InputText placeholder="Disabled" disabled aria-label="Disabled" />    <InputText model-value="Read only" readonly aria-label="Read only" /></template>

Fluid

<script setup lang="ts">import { InputText } from '@vitral/vue';</script> <template>    <InputText placeholder="Fills its container" fluid aria-label="Fluid" /></template>

API

Read from packages/vue/src/components/InputText/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
sizeSize—
variantInputVariantDefaults to the plugin's `inputVariant`.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—
clearablebooleanShows a clear button while there is text.
typestring—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
prefix—Content inside the field, before the text: an icon, a currency sign.
suffix—Content inside the field, after the text: a unit, a button.

Used in these templates