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

Segmented

เลือกหนึ่งจากสองถึงห้าตัวเลือกสั้นๆ บนรางเดียว

ui/choice.tsxServer safe

ควบคุมค่า

สร้างจาก radio จริง จึงใช้ลูกศรเลื่อนได้และส่งในฟอร์มได้ ตัวสลับแบรนด์ที่หัวเว็บนี้ก็ใช้คอมโพเนนต์นี้

รอบการชำระเงินรายเดือนรายปีตลอดชีพ

เลือก: รายปี ประหยัดกว่า 2 เดือน

tsx

const [plan, setPlan] = useState("year");

<Segmented
  name="billing"
  legend="รอบการชำระเงิน"
  value={plan}
  onValueChange={setPlan}
  options={[
    { value: "month", label: "รายเดือน" },
    { value: "year", label: "รายปี" },
    { value: "life", label: "ตลอดชีพ" },
  ]}
/>

ไม่ควบคุมค่า

มุมมองกริดรายการ

tsx

<Segmented name="view" legend="มุมมอง" size="sm" defaultValue="grid" options={…} />

Props

Prop	Type	Default	คำอธิบาย
`name`	`string`	`-`	ชื่อกลุ่ม radio
`legend`	`string`	`-`	ชื่อที่โปรแกรมอ่านหน้าจออ่าน ซ่อนจากสายตา
`options`	`{ value, label, icon? }[]`	`-`	สองถึงห้าตัวเลือก
`value / defaultValue`	`string`	`-`	ค่าที่เลือก
`onValueChange`	`(value: string) => void`	`-`	เรียกเมื่อเปลี่ยน
`size`	`"sm" \| "md"`	`"md"`	ความสูง 28 หรือ 32 px