SCheckbox <s-checkbox>

Uma caixa de seleção individual para uma escolha de sim ou não, vinculada ao seu estado checked com v-model. SCheckbox é o wrapper de Vue 3 tipado do web component <s-checkbox> do Shopify Polaris.

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

Boas práticas

• Mantenha cada checkbox independente. Os lojistas devem poder marcar qualquer combinação de opções sem que um checkbox afete o outro.
• Dê a cada checkbox um label descritivo. Isso importa sobretudo quando um checkbox ativa ou desativa uma configuração, para que os lojistas saibam exatamente o que estão ativando.
• Ordene as opções de forma lógica. Organize-as em ordem alfabética, numérica ou cronológica para que os lojistas encontrem rapidamente a que procuram.
• Reserve indeterminate para um "selecionar tudo" parcial. Use-o em um checkbox de "selecionar tudo" quando apenas alguns dos itens do grupo estiverem marcados.
• Adicione details quando o contexto ajudar. Use-o para explicar melhor o que uma opção faz, apenas quando o rótulo sozinho não for suficiente.

<SCheckbox
  label="Send order confirmation emails"
  details="Customers get an email as soon as their order is placed."
/>

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

Exemplo

Checked: false

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

const value = ref(false)
</script>

<template>
  <SCheckbox label="Send me marketing emails" v-model="value" />
  <p>Checked: {{ value }}</p>
</template>

v-model

v-model em <SCheckbox> se vincula à propriedade checked e escuta o event DOM change.

<SCheckbox v-model="value" />

equivale a:

<SCheckbox :checked="value" @change="value = $event.target.checked" />

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo destinado a usuários de tecnologias assistivas, como leitores de tela. Quando definido, os elementos filhos ou a label fornecida não são anunciados. Também pode ser usado para exibir um controle sem rótulo visível, ainda oferecendo contexto aos usuários de leitores de tela.
checked	boolean	Se o controle está ativo.
defaultChecked	boolean	Se o controle está ativo por padrão.
defaultIndeterminate	boolean	O estado indeterminado inicial para componentes não controlados. Use isto quando quiser que a caixa de seleção comece em estado indeterminado, mas não precisar controlá-la depois. Este valor se aplica até que indeterminate seja definido explicitamente ou o usuário altere o estado da caixa de seleção clicando nela.
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 controle, 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.
indeterminate	boolean	Se a caixa de seleção é exibida em estado indeterminado (nem marcada nem desmarcada), normalmente usado para indicar uma seleção parcial em listas hierárquicas. Este estado visual tem prioridade sobre a prop checked apenas na aparência. O valor enviado com o formulário continua sendo determinado pela prop checked. Se indeterminate não tiver sido definido explicitamente nem modificado por interação do usuário, ele retorna o valor de defaultIndeterminate.
label	any	Conteúdo visual a ser usado como rótulo do controle.
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.
name	string	Um identificador do controle que é exclusivo dentro do componente Form contêiner mais próximo.
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.
value	string	O valor usado nos dados do formulário quando o controle está marcado.

Events

Event	Tipo
blur	FocusEvent
change	Event
input	Event

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

Slots

Slot	Descrição
details
error