Forms & Inputs

Input Field States

State	Border	หมายเหตุ
Default	1px solid #D9DAE4 (grey shade 1)	พื้นหลังขาว, ตัวอักษร #63666F
Focus	2px solid #FF6727	ไม่ใช้ box-shadow สีฟ้า default ของเบราว์เซอร์ — override ด้วย token primary
Error	2px solid #D64541	input.error.border = status.error.600 — ตาม HTML source of truth
Disabled	1px solid #EBECF0 (grey shade 0)	พื้นหลังเทาอ่อนมาก, ตัวอักษร #989AA5, cursor: not-allowed

ทั้ง 4 state พร้อมกัน · ช่องแรกคลิกได้จริง

ชื่อ-นามสกุลDefault → คลิกเพื่อดู focus

อีเมลที่ทำงาน

name@bgrimmpower.com

Focus · border 2px #FF6727

เบอร์ติดต่อ

08x-xxx-xxx

⚠ กรุณากรอกเบอร์โทรให้ครบ 10 หลัก

Error · border 2px #D64541

รหัสพนักงาน

BGP-004821

Disabled · เทา #EBECF0

Border ตอน focus/error หนาขึ้นเป็น 2px แต่ padding ลดลง 1px ชดเชย — ช่องกรอกจึงไม่ "กระตุก" ขยับตอนเปลี่ยน state

.input {
  border: 1px solid var(--bgrimm-grey-200, #D9DAE4);
  border-radius: 4px; /* token: radius.sm */
  padding: 8px 12px;
  color: var(--bgrimm-text);
}
.input:focus { border: 2px solid var(--bgrimm-orange); outline: none; }
.input[aria-invalid="true"] { border: 2px solid var(--bgrimm-orange-dark); }
.input:disabled { background: #EBECF0; color: var(--bgrimm-muted); }

Validation Message

• ข้อความ error ใช้สี #D64541 (status.error.600) ตาม HTML .form-error — ห้ามใช้ #FF6727 ตรงๆ เพราะเป็นตัวอักษรขนาดเล็ก จะไม่ผ่าน WCAG AA (ดู Accessibility & Contrast)
• วางข้อความ error ใต้ input ทันที ไม่ใช้ popup/tooltip ที่บัง field อื่น
• ขึ้นต้นด้วยสิ่งที่ผิดชัดเจน ไม่ใช้ศัพท์เทคนิค เช่น "กรุณากรอกอีเมลให้ถูกต้อง" ไม่ใช่ "Invalid regex match"
• โทนตรงกับ Writing Style — สุภาพ ไม่ตำหนิผู้ใช้

สีข้อความ error · ทำไมต้อง #D64541

ถูก — Error #D64541

อีเมล *

panupong@

⚠ กรุณากรอกอีเมลให้ถูกต้อง

ผ่านเกณฑ์ UI component 3:1อัตราส่วน 4.39:1 บนพื้นขาว — error.600 ตาม HTML ใช้เป็น solid badge/border ได้ อ่านออกในขนาดตัวใหญ่ และมีไอคอนกำกับ ไม่ได้สื่อด้วยสีอย่างเดียว

ผิด — Primary Orange #FF6727

อีเมล *

panupong@

กรุณากรอกอีเมลให้ถูกต้อง

ตกเกณฑ์ที่ 2.91:1ส้ม primary สว่างเกินไปสำหรับตัวอักษรบนพื้นขาว (ไม่ผ่านทั้ง 4.5:1 และ 3:1) — ใช้เป็น border ของช่องกรอกได้ แต่ห้ามใช้เป็นสีตัวอักษร

Label & Helper Text

• Label อยู่เหนือ input เสมอ (ไม่ใช้ placeholder แทน label — ผู้ใช้ลืมค่าที่กรอกไปแล้วเมื่อ placeholder หาย)
• Helper text สีเทา #63666F ขนาดเล็กกว่า label เล็กน้อย วางใต้ label หรือใต้ input ก่อนพิมพ์
• Required field ใช้เครื่องหมาย * สีเดียวกับ error (#D64541) ต่อท้าย label ไม่ใช้คำว่า "(required)" ยาวๆ

รายละเอียด state อื่นๆ ที่เกี่ยวข้อง (loading เมื่อ submit, success หลังส่งฟอร์ม) ดูที่ States & Feedback