Vitral 0.2
Formulário

InputText

Uma caixa de texto de uma linha cujos atributos vão para o input nativo, com prefixo, sufixo e botão de limpar.

Testado com WAI-ARIA

Importação

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

Básico

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>

Adornos e botão de limpar

Conteúdo dentro do campo, dos dois lados, e o botão de limpar.

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>

Tamanhos, variantes e estados

<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>

Fluido

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

API

Lido de packages/vue/src/components/InputText/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
sizeSize—
variantInputVariantO padrão é o `inputVariant` do plugin.
invalidboolean—
disabledboolean—
readonlyboolean—
fluidboolean—
clearablebooleanMostra um botão de limpar enquanto houver texto.
typestring—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Slots

NomeProps do slotDescrição
prefix—Conteúdo dentro do campo, antes do texto: um ícone, um símbolo de moeda.
suffix—Conteúdo dentro do campo, depois do texto: uma unidade, um botão.

Usado nestes templates