SCheckbox <s-checkbox>

Một checkbox đơn cho lựa chọn có/không, gắn với trạng thái checked qua v-model. SCheckbox là Vue 3 wrapper có type cho web component <s-checkbox> của Shopify Polaris.

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

Best practices

• Giữ mỗi checkbox độc lập. Người bán nên có thể chọn bất kỳ tổ hợp lựa chọn nào mà checkbox này không ảnh hưởng đến checkbox khác.
• Gán cho mỗi checkbox một label mô tả rõ. Điều này quan trọng nhất khi checkbox bật hoặc tắt một cài đặt, để người bán biết chính xác họ đang bật cái gì.
• Sắp xếp lựa chọn hợp lý. Sắp theo bảng chữ cái, theo số hoặc theo thời gian để người bán nhanh chóng tìm được lựa chọn mình muốn.
• Chỉ dùng indeterminate cho "chọn tất cả" một phần. Dùng nó trên checkbox "chọn tất cả" khi chỉ một số mục trong nhóm được chọn.
• Thêm details khi cần ngữ cảnh. Dùng nó để giải thích thêm một lựa chọn làm gì, chỉ khi riêng nhãn là chưa đủ.

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

Xem best practices của Shopify cho <s-checkbox> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

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 trên <SCheckbox> gắn với property checked và lắng nghe DOM event change.

<SCheckbox v-model="value" />

tương đương với:

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

Props

Prop	Kiểu	Mô tả
accessibilityLabel	string	Nhãn dành cho người dùng công nghệ hỗ trợ như trình đọc màn hình. Khi được đặt, mọi phần tử con hoặc label được cung cấp sẽ không được đọc lên. Nhãn này cũng có thể dùng để hiển thị một control không có nhãn hiển thị, trong khi vẫn cung cấp ngữ cảnh cho người dùng trình đọc màn hình.
checked	boolean	Control có đang active hay không.
defaultChecked	boolean	Control có ở trạng thái active theo mặc định hay không.
defaultIndeterminate	boolean	Trạng thái indeterminate ban đầu cho component không được kiểm soát (uncontrolled). Dùng khi bạn muốn checkbox bắt đầu ở trạng thái indeterminate nhưng không cần kiểm soát nó sau đó. Giá trị này có hiệu lực cho đến khi indeterminate được đặt tường minh hoặc người dùng thay đổi trạng thái checkbox bằng cách nhấp.
details	any	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho trường. Văn bản này được hiển thị cùng với trường và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng. Văn bản này cũng được cung cấp cho người dùng trình đọc màn hình.
disabled	boolean	Vô hiệu hóa control, không cho phép bất kỳ tương tác nào.
error	any	Báo lỗi cho người dùng. Trường sẽ được áp dụng kiểu hiển thị riêng để thông báo các vấn đề cần được giải quyết ngay.
indeterminate	boolean	Checkbox có hiển thị ở trạng thái indeterminate (không chọn cũng không bỏ chọn) hay không, thường dùng để biểu thị lựa chọn một phần trong danh sách phân cấp. Trạng thái trực quan này chỉ được ưu tiên hơn prop checked về mặt hiển thị. Giá trị gửi đi của form vẫn do prop checked quyết định. Nếu indeterminate chưa được đặt tường minh và chưa bị thay đổi bởi tương tác người dùng, nó trả về giá trị của defaultIndeterminate.
label	any	Nội dung trực quan dùng làm nhãn của control.
labelAccessibilityVisibility	"visible" | "exclusive"	Thay đổi khả năng hiển thị của nhãn của component. - visible: nhãn hiển thị với mọi người dùng. - exclusive: nhãn bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng (accessibility tree).
name	string	Định danh cho control, là duy nhất trong component Form chứa nó gần nhất.
required	boolean	Trường có bắt buộc phải có giá trị hay không. Yêu cầu này bổ sung giá trị ngữ nghĩa cho trường, nhưng sẽ không tự động hiển thị lỗi. Nếu muốn hiển thị lỗi khi trường này trống, bạn có thể dùng thuộc tính error.
value	string	Giá trị dùng trong dữ liệu form khi control được chọn.

Events

Event	Kiểu
blur	FocusEvent
change	Event
input	Event

Lắng nghe các event này bằng listener dạng @blur trên <SCheckbox>.

Slots

Slot	Mô tả
details
error