STextField <s-text-field>

Um campo de texto de uma linha com rótulo, placeholder, erro de validação e texto de ajuda. STextField é o wrapper de Vue 3 tipado do web component <s-text-field> do Shopify Polaris.

import { STextField } from 'polaris-vue-elements'

Boas práticas

• Deixe óbvia a entrada esperada. Escreva um label e um placeholder que digam aos lojistas o que digitar e em qual formato. Textos vagos levam a suposições, erros de validação e frustração.
• Adicione contexto com um prefixo ou sufixo. Use prefix e suffix para mostrar o tipo de valor e o formato dele, por exemplo se os lojistas devem digitar uma URL inteira ou apenas um subdomínio, ou um preço completo ou só o valor.
• Baseie as restrições em requisitos reais. Defina minLength, maxLength e as regras de validação de acordo com as necessidades reais do negócio, e não com números arbitrários, e informe aos lojistas quais são.
• Dê feedback cedo e de forma específica. Informe aos lojistas se a entrada é válida enquanto eles digitam, e não apenas ao enviar. Quando não for, use error para explicar o que está errado e como corrigir.

<STextField label="Store address" prefix="https://" suffix=".myshopify.com" />

Veja as boas práticas da Shopify para <s-text-field> (em inglês) para todas as recomendações.

Exemplo

Value: (empty)

<script setup>
import { ref } from 'vue'
import { STextField } from 'polaris-vue-elements'

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

<template>
  <STextField label="Your name" placeholder="Jane Doe" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model em <STextField> se vincula à propriedade value e escuta o event DOM input.

<STextField v-model="value" />

equivale a:

<STextField :value="value" @input="value = $event.target.value" />

Props

Prop	Tipo	Descrição
autocomplete	"language" | "organization" | "name" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" … (84 more)	Uma indicação sobre o conteúdo esperado do campo. Quando definida como on (o padrão), esta propriedade indica que o campo deve oferecer suporte ao preenchimento automático, mas você não tem mais informações semânticas sobre o conteúdo esperado. Quando definida como off, você indica que este campo contém informações confidenciais ou conteúdo que nunca é salvo, como códigos de uso único. Como alternativa, você pode fornecer um valor que descreva os dados específicos que deseja que sejam inseridos neste campo durante o preenchimento automático.
defaultValue	string	O valor padrão do campo.
details	any	Texto adicional que oferece contexto ou orientação sobre o campo. Esse texto é exibido junto com o campo e seu rótulo para oferecer mais informações ou instruções ao usuário. Ele também é exposto aos usuários de leitores de tela.
disabled	boolean	Desativa o campo, impedindo qualquer interação.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
icon	"cart-filled" | "channels-filled" | "home-filled" | "order-filled" | "person-filled" | "product-filled" | "color" | "info" … (597 more)	O tipo de ícone a ser exibido no campo.
id	string	Um identificador exclusivo para o elemento.
label	any	Conteúdo usado como rótulo do campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Altera a visibilidade do rótulo do componente. - visible: o rótulo fica visível para todos os usuários. - exclusive: o rótulo fica visualmente oculto, mas permanece na árvore de acessibilidade.
maxLength	number	Especifica o número máximo de caracteres permitidos.
minLength	number	Especifica o número mínimo de caracteres permitidos.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
placeholder	string	Uma breve indicação que descreve o valor esperado do campo.
prefix	string	Um valor exibido logo antes da parte editável do campo. É útil para exibir uma parte implícita do valor, como "https://" ou "+353". O usuário não pode editá-lo, e ele não é incluído no valor do campo. Ele pode não ser exibido até que o usuário interaja com o campo. Por exemplo, um rótulo em linha pode ocupar o lugar do prefixo até que o usuário coloque o foco no campo.
readOnly	boolean	O campo não pode ser editado pelo usuário. Ele pode receber foco e é anunciado pelos leitores de tela.
required	boolean	Se o campo exige um valor. Este requisito adiciona valor semântico ao campo, mas não faz um erro aparecer automaticamente. Se quiser exibir um erro quando este campo estiver vazio, você pode fazer isso com a propriedade error.
suffix	string	Um valor exibido logo após a parte editável do campo. É útil para exibir uma parte implícita do valor, como "@shopify.com" ou "%". O usuário não pode editá-lo, e ele não é incluído no valor do campo. Ele pode não ser exibido até que o usuário interaja com o campo. Por exemplo, um rótulo em linha pode ocupar o lugar do sufixo até que o usuário coloque o foco no campo.
value	string	O valor atual do campo. Se omitido, o campo ficará vazio.

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escute-os com listeners no estilo @blur em <STextField>.

Slots

Slot	Descrição
accessory	Conteúdo adicional exibido ao lado do campo de texto, normalmente um ícone ou botão que oferece uma funcionalidade relacionada, como abrir um tooltip de ajuda ou acionar um modal.
details
error