SCheckbox <s-checkbox>

Una casilla de verificación individual para una elección de sí o no, vinculada a su estado checked con v-model. SCheckbox es el wrapper de Vue 3 tipado del web component <s-checkbox> de Shopify Polaris.

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

Buenas prácticas

• Mantén cada casilla independiente. Los comerciantes deben poder marcar cualquier combinación de opciones sin que una casilla afecte a otra.
• Da a cada casilla un label descriptivo. Esto es especialmente importante cuando una casilla activa o desactiva un ajuste, para que los comerciantes sepan exactamente qué están activando.
• Ordena las opciones de forma lógica. Ordénalas alfabéticamente, numéricamente o por fecha para que los comerciantes encuentren rápidamente la que buscan.
• Reserva indeterminate para un "seleccionar todo" parcial. Úsalo en una casilla "seleccionar todo" cuando solo algunos de los elementos de su grupo estén marcados.
• Añade details cuando el contexto ayude. Úsalo para explicar mejor lo que hace una opción, solo cuando la etiqueta por sí sola no sea suficiente.

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

Consulta las buenas prácticas de Shopify para <s-checkbox> (en inglés) para ver todas las recomendaciones.

Ejemplo

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 en <SCheckbox> se vincula a la propiedad checked y escucha el event DOM change.

<SCheckbox v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
accessibilityLabel	string	Una etiqueta destinada a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Cuando se define, no se anuncian los elementos secundarios ni la label proporcionada. También puede usarse para mostrar un control sin etiqueta visible y seguir aportando contexto a los usuarios de lectores de pantalla.
checked	boolean	Si el control está activo.
defaultChecked	boolean	Si el control está activo de forma predeterminada.
defaultIndeterminate	boolean	El estado indeterminado inicial para componentes no controlados. Úsalo cuando quieras que la casilla de verificación empiece en estado indeterminado pero no necesites controlarla después. Este valor se aplica hasta que indeterminate se establece explícitamente o el usuario cambia el estado de la casilla haciendo clic.
details	any	Texto adicional que aporta contexto u orientación sobre el campo. Este texto se muestra junto con el campo y su etiqueta para ofrecer más información o instrucciones al usuario. También se expone a los usuarios de lectores de pantalla.
disabled	boolean	Desactiva el control e impide cualquier interacción.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
indeterminate	boolean	Si la casilla de verificación se muestra en estado indeterminado (ni marcada ni desmarcada), normalmente para indicar una selección parcial en listas jerárquicas. Este estado visual tiene prioridad sobre la prop checked solo en la apariencia. El valor que se envía con el formulario sigue determinándolo la prop checked. Si indeterminate no se ha establecido explícitamente ni lo ha modificado la interacción del usuario, devuelve el valor de defaultIndeterminate.
label	any	Contenido visual que se usa como etiqueta del control.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
name	string	Un identificador del control que es único dentro del componente Form contenedor más cercano.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
value	string	El valor que se usa en los datos del formulario cuando el control está marcado.

Events

Event	Tipo
blur	FocusEvent
change	Event
input	Event

Escúchalos con listeners del estilo @blur en <SCheckbox>.

Slots

Slot	Descripción
details
error