ทุก component

ปุ่มหลักของระบบ มี 6 variant และขนาดรองรับตั้งแต่ xs ถึง lg รวมถึงปุ่มไอคอนสำหรับแถบเครื่องมือ

@whereui/button

รวมปุ่มที่เกี่ยวข้องกันเป็นแถบเดียว เช่น คัดลอก-พิมพ์-ลบ มีข้อความคั่นและเส้นแบ่งในตัว วางแนวตั้งได้

@whereui/button-group

ปุ่มสลับสถานะเดี่ยวที่ค้างสถานะกดไว้ เช่น ปักหมุดรายการหรือเปิดโหมดดูร่าง เป็นส่วนเดียวกับ ToggleGroup แต่ใช้เดี่ยว ๆ

@whereui/toggle

กลุ่มปุ่มสลับที่เลือกได้หลายค่าพร้อมกัน เช่น เลือกคอลัมน์ที่จะแสดงในตาราง หรือโหมดมุมมองหลายค่า

@whereui/toggle-group

ช่องกากบาทเลือกหลายข้อ รองรับสถานะกึ่งเลือก (indeterminate) สำหรับเลือกทั้งหมด ปิดใช้งาน และสถานะข้อมูลไม่ถูกต้อง

@whereui/checkbox

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

@whereui/combobox

โครงสร้างหนึ่งช่องฟอร์ม ครอบ label คำอธิบาย และข้อความผิดพลาดไว้ที่เดียว พร้อมรูปแบบแนวตั้ง แนวนอน และปรับตามความกว้างจอ

@whereui/field

ช่องกรอกข้อความพื้นฐาน รองรับทุก type ของ input รวมถึงไฟล์แนบ พร้อมสถานะปิดใช้งานและข้อมูลไม่ถูกต้อง

@whereui/input

กลุ่มช่องกรอกที่มีส่วนเสริมหัว–ท้าย เช่น ไอคอนค้นหา หน่วยเงินบาท หรือปุ่มแสดงรหัสผ่าน ครอบ input ให้เป็นแถบเดียวกัน

@whereui/input-group

ช่องกรอกรหัสยืนยันแบบทีละหลัก พร้อมตัวคั่นกลุ่มตัวเลข เช่น รหัส 6 หลักจาก SMS ก่อนเข้าถึงคำขอกู้

@whereui/input-otp

ป้ายชื่อของช่องฟอร์ม เชื่อมกับช่องข้อมูลผ่าน htmlFor เพื่อการเข้าถึง หรือครอบตัวควบคุม เช่น ช่องกาติ๊กเพื่อให้คลิกได้ทั้งข้อความ

@whereui/label

ช่องกรอกจำนวนเงินบาท คั่นหลักพันและทศนิยม 2 ตำแหน่งอัตโนมัติ ค่าที่รับ/ส่งเป็นจำนวนเต็มหน่วยสตางค์เพื่อเลี่ยงปัญหาจุดทศนิยม

@whereui/money-input

ช่องเลือกค่าที่ใช้ select แท้ของเบราว์เซอร์ เบาและเปิดตัวเลือกตามระบบปฏิบัติการ เหมาะกับฟอร์มทั่วไปและรองรับมือถือดีที่สุด

@whereui/native-select

ช่องกรอกตัวเลขพร้อมปุ่มเพิ่ม/ลด พิมพ์ค่าเองได้ กดลูกศรขึ้นลงได้ และกดค้างที่ปุ่มเพื่อเพิ่ม/ลดต่อเนื่อง

@whereui/number-input

แบบสอบถามที่ถามทีละข้อ พร้อมปุ่มไปหน้า/ย้อนหลัง แถบความคืบหน้า และการตรวจคำตอบที่จำเป็น เหมาะกับแบบประเมินพนักงานหรือสำรวจความพึงพอใจ

@whereui/questionnaire

ชุดตัวเลือกที่เลือกได้ครั้งละหนึ่งอย่าง เช่น ประเภทการลาหรือผู้อนุมัติ ใช้ Arrow keys เลื่อนดูตัวเลือกได้

@whereui/radio-group

ช่องพิมพ์ข้อความประกอบรูปแบบได้ (ตัวหนา เอียง หัวข้อ รายการ ลิงก์) สร้างบน Tiptap + StarterKit ค่าที่รับ/ส่งเป็น HTML string

@whereui/rich-text-editor

กล่องรายการแบบ dropdown ที่เลือกค่าเดียว รองรับการจัดกลุ่มรายการ คีย์บอร์ด และขนาดเล็กสำหรับฟอร์มกระชับ

@whereui/select

แถบเลื่อนเลือกค่าตัวเลข เช่น จำนวนวันลาหรือเปอร์เซ็นต์เป้าหมาย รองรับหลายหัวเลื่อนเพื่อเลือกช่วงค่า

@whereui/slider

สวิตช์เปิด/ปิดสำหรับตัวเลือกที่มีสองสถานะทันที เช่น การรับการแจ้งเตือนผลการอนุมัติ

@whereui/switch

ช่องกรอกข้อความหลายบรรทัด เช่น เหตุผลการลาหรือรายละเอียดค่าใช้จ่าย ความสูงขยายตามเนื้อหาอัตโนมัติ

@whereui/textarea

ปฏิทินเลือกวันที่บน react-day-picker รองรับ locale ไทย พุ่งพานเลือกเดือน-ปี เลือกช่วงวันที่ และปิดวันที่เลือกไม่ได้

@whereui/calendar

ช่องเลือกวันที่พร้อมปฏิทิน popover แสดงวันที่ภาษาไทยและปี พ.ศ. ได้ตั้งแต่เริ่มต้น ค่าที่รับ/ส่งเป็น Date จริงเสมอ

@whereui/date-picker

ช่องเลือกช่วงวันที่ (วันเริ่มต้น–วันสิ้นสุด) พร้อมปฏิทิน popover แสดงภาษาไทยและปี พ.ศ. ปิดอัตโนมัติเมื่อเลือกครบทั้งสองวัน

@whereui/date-range-picker

ช่องเลือกเวลาแบบ 24 ชั่วโมง แยกชั่วโมง/นาทีเป็นรายการเลือก ตั้งระยะห่างนาทีได้ บนมือถือได้เครื่องมือเลือกเวลาของระบบ

@whereui/time-picker

การ์ดรายการไฟล์แนบพร้อมไอคอน ชื่อไฟล์ สถานะ และปุ่มการกระทำ ใช้แสดงเอกสารประกอบคำขอกู้ทั้งก่อนและหลังอัปโหลด

@whereui/attachment

พื้นที่ลากไฟล์มาวางหรือกดเลือกไฟล์ จำกัดชนิดและขนาดไฟล์ได้ แสดงรายการไฟล์พร้อมปุ่มลบ และข้อความผิดพลาดภาษาไทย — ไม่มีการอัปโหลดจริง ไฟล์ถูกส่งกลับผ่าน onChange

@whereui/file-upload

เลือกรูปจากเครื่องหรือถ่ายจากกล้องหลังของมือถือได้ในปุ่มเดียว แสดงตัวอย่างรูปเป็นตารางและลบได้ทีละรูป — ไม่มีการอัปโหลดจริง

@whereui/image-upload

แผ่นพับเปิด-ปิดแสดงเนื้อหายาวเป็นหัวข้อ ใช้ทำคำถามที่พบบ่อยหรือกลุ่มเงื่อนไขเอกสาร เปิดหลายหัวข้อพร้อมกันได้

@whereui/accordion

แถบนำทางล่างสำหรับมือถือ 3–5 ปุ่ม ไอคอนพร้อมป้ายกำกับ รองรับสถานะ active ตัวเลขแจ้งเตือน และเว้นระยะ safe area ด้านล่างจอ

@whereui/bottom-nav

เส้นทางแสดงตำแหน่งหน้าปัจจุบัน เช่น หน้าแรก › สวัสดิการ › กองทุนกู้ › คำขอของ น้ำใจ ตัดระยะกลางด้วย ellipsis ได้

@whereui/breadcrumb

กล่องพับเปิด-ปิดหนึ่งช่อง ควบคุมปุ่มเปิดเองได้ ใช้ซ่อนรายละเอียดยาว เช่น รายชื่อผู้ร่วมอนุมัติ

@whereui/collapsible

แถบเมนูแนวนอนแบบโปรแกรมสำนักงาน เช่น ไฟล์ มุมมอง ที่เปิดเมนูย่อยรายการ พร้อมรายการกาติ๊กและวิทยุสำหรับตัวเลือกมุมมอง

@whereui/menubar

เมนูหลักของหน้าเว็บแบบมีแผงเมนูย่อย เปิดด้วยการคลิกหรือคีย์บอร์ด เหมาะกับการนำทางระหว่างสวัสดิการและกองทุนต่าง ๆ

@whereui/navigation-menu

ตัวเลื่อนหน้าของตารางหรือรายการยาว มีปุ่มก่อนหน้า–ถัดไป เลขหน้า และจุดข้ามหน้า ปรับข้อความเป็นภาษาไทยได้ผ่าน prop text

@whereui/pagination

แสดงขั้นตอนเป็นแนวนอนหรือแนวตั้ง พร้อมสถานะเสร็จแล้ว ขั้นปัจจุบัน รอ และผิดพลาด เหมาะกับฟอร์มหลายขั้น เช่น การสมัครงาน หรือการส่งคำขอ

@whereui/stepper

แท็บสลับมุมมองเนื้อหาในหน้าเดียวกัน มีสองแบบคือแท็บปกติ (default) และแท็บขีดเส้นใต้ (line) ใช้ลูกศรเลื่อนแท็บได้

@whereui/tabs

หน้าต่างยืนยันการกระทำที่ย้อนกลับไม่ได้ เช่น ยกเลิกคำขอกู้ ต้องกดเลือกชัดเจนก่อนจึงจะดำเนินการ

@whereui/alert-dialog

ช่องคำสั่งค้นหา-เลือกการกระทำแบบพิมพ์เร็ว รวมกลุ่มคำสั่งพร้อมปุ่มลัด ใช้เป็นแผงลอย ⌘K หรือกล่องในหน้าก็ได้

@whereui/command

กล่องยืนยันการกระทำบน AlertDialog รองรับ variant แบบทำลายล้าง ปรับข้อความปุ่มได้ และมีสถานะกำลังทำงาน

@whereui/confirm-dialog

เมนูที่เปิดด้วยการคลิกขวา (หรือกดค้างบนมือถือ) มีรายการคำสั่ง ปุ่มลัด ตัวเลือกติ๊ก และรายการเดี่ยวแบบกลุ่ม เหมาะกับตารางรายการคำขอ

@whereui/context-menu

หน้าต่างโต้ตอบกลางจอสำหรับงานที่ต้องการการตัดสินใจหรือกรอกข้อมูลสั้น ๆ เช่น ยืนยันการส่งคำขอกู้ ก่อนดำเนินการต่อ

@whereui/dialog

ลิ้นชักเลื่อนจากขอบจอ รองรับการปัดเพื่อปิดและจุดยึดระหว่างทาง (snap points) เหมาะกับตัวกรองหรือแผงรายละเอียดบนมือถือ

@whereui/drawer

เมนูรายการที่เปิดจากปุ่ม รองรับเมนูซ้อน รายการแบบกาติ๊กและวิทยุ ตัวคั่น และปุ่มลัด ใช้จัดการการกระทำต่อรายการ เช่น แก้ไขหรือส่งต่อคำขอ

@whereui/dropdown-menu

การ์ดข้อมูลย่อที่เด้งขึ้นเมื่อชี้ที่ตัวเร่ง เหมาะกับการดูภาพรวมของคนหรือรายการโดยไม่ต้องเปิดหน้าใหม่

@whereui/hover-card

การ์ดลอยที่เปิดจากการคลิก ใส่เนื้อหาโต้ตอบสั้น ๆ ได้ เช่น ฟอร์มคัดลอกลิงก์หรือตัวเลือกเร็ว ปิดเมื่อคลิกภายนอกหรือกด Esc

@whereui/popover

แผงที่เลื่อนออกมาจากขอบจอเพื่อแสดงรายละเอียดหรือฟอร์มสั้น ๆ โดยไม่ต้องออกจากหน้าปัจจุบัน เลือกด้านที่โผล่ได้ 4 ด้าน

@whereui/sheet

คำแนะนำสั้น ๆ ที่โผล่เมื่อชี้หรือโฟกัสที่ element เหมาะกับปุ่มไอคอนที่ไม่มีข้อความกำกับ เลือกด้านที่โผล่ได้ 4 ด้าน

@whereui/tooltip

กล่องข้อความแจ้งสถานะหรือปัญหาภายในหน้า เช่น ผลการตรวจสอบคำขอกู้ ใส่ไอคอนและปุ่มการกระทำประกอบได้

@whereui/alert

แถบประกาศเต็มความกว้าง มีไอคอนอัตโนมัติตามสถานะ ปิดได้ด้วยปุ่มกากบาทเมื่อส่ง onClose

@whereui/banner

สถานะว่างเปล่าเมื่อไม่มีข้อมูลแสดง พร้อมไอคอน คำอธิบาย และปุ่มชวนให้เริ่มการกระทำ เช่น ยังไม่มีคำขอกู้ในระบบ

@whereui/empty

ส่วนแสดงข้อผิดพลาดกลางหน้า พร้อมไอคอน ข้อความอธิบาย และปุ่มลองใหม่ — ใช้แทนหน้าว่างเปล่าเมื่อโหลดข้อมูลไม่สำเร็จ

@whereui/error-state

โครงหนึ่งข้อความในบทสนทนา ประกอบด้วยรูปผู้ส่ง หัวข้อ เนื้อหา และท้ายข้อความ จัดชิดซ้าย–ขวาตามผู้ส่ง ใช้คู่กับ Bubble เพื่อสร้างกล่องคุย

@whereui/message

พื้นที่บทสนทนาที่เลื่อนตามข้อความใหม่อัตโนมัติ พร้อมปุ่มเลื่อนลงล่าสุดเมื่อผู้ใช้อ่านย้อนหลัง เหมาะกับห้องแชดงาน HR

@whereui/message-scroller

แถบแสดงความคืบหน้าของงาน เช่น การอัปโหลดเอกสารหรือขั้นตอนการอนุมัติ รองรับทั้งแบบระบุค่าและแบบไม่ระบุค่า (indeterminate)

@whereui/progress

บล็อกพื้นหลังกะพริบแทนเนื้อหาที่กำลังโหลด ลดความรู้สึกว่าหน้ากระตุกเมื่อข้อมูลจากเซิร์ฟเวอร์มาถึง

@whereui/skeleton

ไอคอนหมุนบอกสถานะกำลังโหลด มี role status ให้ screen reader รับรู้ได้ ปรับขนาดตามบริบทได้ด้วย className

@whereui/spinner

การแจ้งผลลัพธ์ชั่วคราวที่ลอยขึ้นจากขอบล่างจอ มีไอคอนและสีตามชนิด (สำเร็จ แจ้งเตือน ผิดพลาด กำลังโหลด) เลื่อนดูหลายใบแล้วปัดปิดได้

@whereui/toast

ไทม์ไลน์ขั้นตอนการประมวลผล เช่น เส้นทางของคำขอลาตั้งแต่ยื่นจนได้ผล มีสถานะกำลังทำ เกิดข้อผิดพลาด และรอคิว พร้อมส่วนที่กดขยายดูรายละเอียดได้

@whereui/trace

รูปโปรไฟล์พร้อมตัวอักษรย่อเมื่อไม่มีรูป มีจุดสถานะปักมุม และกลุ่มผู้อนุมัติหลายคนซ้อนกันพร้อมตัวเลข +n

@whereui/avatar

ป้ายสถานะเล็ก ๆ กำกับรายการ เช่น รออนุมัติ ตีกลับ ฉบับร่าง เปลี่ยนสีตาม variant และใส่ไอคอนหรือทำเป็นลิงก์ได้

@whereui/badge

ฟองข้อความสนทนาแบบแชท จัดซ้าย-ขวาตามผู้พูด เปลี่ยนรูปลักษณ์ตาม variant และปักปุ่มรีแอคชันได้

@whereui/bubble

การ์ดจัดกลุ่มเนื้อหาหนึ่งเรื่อง เช่น สรุปคำขอกู้ มีส่วนหัว คำอธิบาย มุมปุ่มการกระทำ เนื้อหา และแถบท้าย พร้อมขนาด sm สำหรับรายการกระชับ

@whereui/card

แถบเลื่อนดูการ์ดหรือรายการแบบมีปุ่มควบคุมทิศทาง รองรับแนวนอนและแนวตั้ง เหมาะกับคำขอกู้ล่าสุดหรือแกลเลอรีเอกสาร

@whereui/carousel

ตารางข้อมูลแบบสมบูรณ์บน TanStack Table v9 ครบในตัวเดียว: เรียงคอลัมน์ ค้นหารวม แบ่งหน้า เลือกแถวด้วย checkbox สถานะ loading และ empty พร้อม toolbar สำหรับปุ่มเพิ่มเติม

@whereui/data-table

รายการ ป้าย:ค่า สำหรับหน้ารายละเอียด — จอแคบเรียงแนวตั้ง ตั้งแต่จอ sm ป้ายอยู่คอลัมน์ซ้ายค่าอยู่ขวา

@whereui/description-list

แถวรายการที่ประกอบจากสื่อ หัวข้อ คำอธิบาย และปุ่มการกระทำ ใช้แสดงรายชื่อผู้อนุมัติหรือเอกสารในกลุ่มเดียวกัน

@whereui/item

แสดงเงินจากจำนวนเต็มหน่วยสตางค์เป็นบาท คั่นหลักพัน ตัวเลข tabular-nums เรียงคอลัมน์ตรงกันเสมอ รองรับค่าติดลบ

@whereui/money

การ์ดตัวเลข KPI พร้อมป้ายกำกับ ไอคอน และการเปลี่ยนแปลงขึ้น/ลง/คงที่ ตัวเลขใช้ tabular-nums ให้ต่อกันเป็นคอลัมน์สวยงาม

@whereui/stat-card

ป้ายสถานะทรงแคปซูล ใช้คู่สีพื้นอ่อน -soft กับตัวอักษรสีเดียวกัน มีจุดสีนำหน้าข้อความได้

@whereui/status-pill

ตารางข้อมูลมาตรฐานพร้อมส่วนหัว เนื้อหา ส่วนท้ายสรุปยอด และคำอธิบาย มีการเลื่อนแนวนอนอัตโนมัติเมื่อคอลัมน์เยอะบนจอแคบ

@whereui/table

ลำดับเหตุการณ์แนวตั้ง เช่น ประวัติการอนุมัติ หรือความเคลื่อนไหวของเอกสาร แต่ละรายการมีไอคอน ชื่อเหตุการณ์ ผู้กระทำ และเวลา

@whereui/timeline

ครอบกราฟของ recharts ให้ใช้สีธีม คำอธิบายและ tooltip ภาษาไทยโดยอัตโนมัติ เหมาะกับรายงานยอดกู้-ออมรายเดือน

@whereui/chart

ครอบพื้นที่ให้คงอัตราส่วนกว้าง-สูงตามที่กำหนด เช่น วิดีโอ 16:9 หรือรูปถ่ายเอกสาร 4:3 ไม่ให้เลย์เอาต์เต้นขณะโหลด

@whereui/aspect-ratio

ผู้ให้บริการทิศทางข้อความ (LTR/RTL) สำหรับส่วนของหน้าที่มีข้อความภาษาที่อ่านจากขวาไปซ้าย โดยไม่ต้องสลับทั้งหน้า

@whereui/direction

ส่วนหัวของหน้า: breadcrumb ชื่อหน้า คำอธิบาย ปุ่มการกระทำฝั่งขวา และปุ่มย้อนกลับนำหน้าชื่อ เมื่อจำเป็น

@whereui/page-header

โครงแอปทั้งหน้าจอ: จอกว้างมี sidebar ซ้ายพื้นเข้ม (โทน sidebar) พร้อมแถบบน · มือถือมีแถบบนและรับ bottom-nav แทน เนื้อหาเลื่อนภายใน

@whereui/page-shell

แบ่งพื้นที่หน้าจอเป็นส่วน ๆ ที่ลากปรับขนาดได้ เช่น รายการคำขออยู่กับรายละเอียด เลือกแนวนอนหรือแนวตั้งได้

@whereui/resizable

พื้นที่เลื่อนดูเนื้อหาที่มีแถบเลื่อนของตัวเอง ควบคุมสไตล์แถบได้สม่ำเสมอทั้งแนวตั้งและแนวนอน

@whereui/scroll-area

เส้นคั่นเนื้อหาทั้งแนวนอนและแนวตั้ง ใช้แบ่งหัวข้อหรือคั่นข้อมูล metadata ในบรรทัดเดียว

@whereui/separator

แถบเมนูด้านข้างแบบเต็มระบบ ย่อได้เหลือไอคอน ซ่อนเป็นแผงบนมือถือ และมีชิ้นส่วนย่อยครบทั้งกลุ่มเมนู ป้ายแจ้งจำนวน และเมนูย่อย

@whereui/sidebar

กล่องแสดงโค้ดพร้อมหัวเรื่อง เลขบรรทัด ปุ่มคัดลอก และแถบไล่สีบรรทัดเพิ่ม/ลบ/เน้น เหมาะกับตัวอย่างโค้ดและ log ระบบ

@whereui/code-block

แสดงปุ่มคีย์บอร์ดบนหน้าจอ เช่น ค้าง ⌘ แล้วกด K เพื่อเปิดค้นหา มี KbdGroup สำหรับจับคู่หลายปุ่มเข้าด้วยกัน

@whereui/kbd

ข้อความกำกับแนวตั้ง เช่น หมายเหตุ คำอธิบายท้ายตาราง หรือหัวข้อคั่นกลางบรรทัด มีทั้งแบบเรียบ แบบเส้นคั่นสองข้าง และแบบเส้นใต้

@whereui/marker