ข้ามไปเนื้อหา
แบรนด์ที่แสดง
ธีม: ตามระบบ
คอมโพเนนต์ทั้งหมด

Select

ดรอปดาวน์แบบ native ใช้ได้ดีบนมือถือและคีย์บอร์ด

ui/field.tsxServer safe

Native select

ใช้ select ของเบราว์เซอร์ จึงได้ตัวเลือกแบบเต็มจอบนมือถือ คีย์บอร์ด และการกรอกอัตโนมัติ
tsx
<Field label="ระดับชั้น">
  <Select defaultValue="m6">
    <option value="m4">ม.4</option>
    <option value="m5">ม.5</option>
    <option value="m6">ม.6</option>
    <option value="uni">มหาวิทยาลัย</option>
  </Select>
</Field>

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

เลือกชุดข้อสอบก่อนเริ่ม

tsx
<Select>
  <optgroup label="สอบเข้า">
    <option>TGAT</option>
    <option>A-Level</option>
  </optgroup>
</Select>

Props

PropTypeDefaultคำอธิบาย
size"sm" | "md" | "lg""md"ความสูงเหมือน Input
...propsSelectHTMLAttributes-value, defaultValue, name, onChange

ใช้เมื่อไร

ควรทำ

  • ใช้เมื่อมีตัวเลือกห้าข้อขึ้นไป
  • เรียงตัวเลือกให้มีเหตุผล เช่น ตามลำดับหรือตัวอักษร

ไม่ควรทำ

  • ใช้กับสองถึงสี่ตัวเลือก ใช้ Radio หรือ Segmented แทน
  • สร้างดรอปดาวน์เองถ้า native ทำได้