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

Radio

เลือกหนึ่งข้อจากหลายตัวเลือกในกลุ่มเดียวกัน

ui/choice.tsxServer safe

กลุ่มตัวเลือก

ห่อด้วย ChoiceGroup เพื่อได้ fieldset และ legend ทุก Radio ในกลุ่มใช้ name เดียวกัน ลูกศรเลื่อนระหว่างตัวเลือกได้

รูปแบบการเรียนเรียนเองเข้าเรียนได้ตลอดเวลาเรียนสดทุกวันเสาร์ 10:00มีพี่เลี้ยงนัดคุยรายสัปดาห์

tsx

<ChoiceGroup legend="รูปแบบการเรียน">
  <Radio name="mode" value="self" label="เรียนเอง" description="เข้าเรียนได้ตลอดเวลา" defaultChecked />
  <Radio name="mode" value="live" label="เรียนสด" description="ทุกวันเสาร์ 10:00" />
  <Radio name="mode" value="mentor" label="มีพี่เลี้ยง" description="นัดคุยรายสัปดาห์" />
</ChoiceGroup>

แนวนอน

ใช้เมื่อตัวเลือกสั้นมากและมีไม่เกินสี่ข้อ

ภาษาของบทเรียนไทยEnglish日本語

tsx

<ChoiceGroup legend="ภาษา" orientation="horizontal">…</ChoiceGroup>

Props

Prop	Type	Default	คำอธิบาย
`ChoiceGroup.legend`	`ReactNode`	`-`	คำถามของกลุ่ม
`ChoiceGroup.orientation`	`"vertical" \| "horizontal"`	`"vertical"`	ทิศทาง
`Radio.label / description`	`ReactNode`	`-`	ข้อความหลักและรอง
`Radio ...props`	`InputHTMLAttributes`	`-`	name, value, checked, onChange