คอมโพเนนต์ทั้งหมด

Checkbox

เลือกได้หลายข้อ รองรับสถานะไม่ครบ (indeterminate)

ui/choice.tsxServer safe

พื้นฐาน

checkbox ของเบราว์เซอร์ที่ซ่อนไว้ใต้กล่องที่วาดใหม่ ใช้ในฟอร์มได้โดยไม่ต้องมี JavaScript

รับข่าวคอร์สใหม่ทางอีเมลยอมรับเงื่อนไขการใช้งานอ่านได้ที่หน้าเงื่อนไข เปลี่ยนได้ทุกเมื่อปิดใช้งาน

tsx

<Checkbox label="รับข่าวคอร์สใหม่ทางอีเมล" defaultChecked />
<Checkbox label="ยอมรับเงื่อนไขการใช้งาน" description="อ่านได้ที่หน้าเงื่อนไข" />
<Checkbox label="ปิดใช้งาน" disabled />

เลือกไม่ครบ

กล่องแม่แสดงขีดเมื่อเลือกลูกบางข้อ ตั้ง indeterminate ผ่าน ref

ดาวน์โหลดทั้งคอร์ส

บทที่ 1 พื้นฐานบทที่ 2 เครื่องมือบทที่ 3 โปรเจกต์

tsx

<Checkbox
  ref={node => { if (node) node.indeterminate = some; }}
  label="ดาวน์โหลดทั้งคอร์ส"
  checked={all}
  onChange={toggleAll}
/>

Props

Prop	Type	Default	คำอธิบาย
`label`	`ReactNode`	`-`	ข้อความข้างกล่อง กดได้
`description`	`ReactNode`	`-`	คำอธิบายบรรทัดที่สอง
`...props`	`InputHTMLAttributes`	`-`	checked, defaultChecked, name, value, onChange, ref

ใช้เมื่อไร

ควรทำ

ใช้กับค่าที่จะส่งภายหลังด้วยปุ่มบันทึก
ข้อความเป็นบวก เช่น รับข่าว ไม่ใช่ ไม่รับข่าว

ไม่ควรทำ

ใช้กับการตั้งค่าที่มีผลทันที ใช้ Switch แทน
เลือกไว้ล่วงหน้าเพื่อให้ผู้ใช้ยอมรับการตลาด