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

Field

ป้ายกำกับ คำแนะนำ และข้อผิดพลาด ผูก ARIA ให้ครบ

ui/field.tsxServer safe

โครงสร้าง

ป้ายกำกับอยู่บน ช่องกรอกตรงกลาง คำแนะนำและข้อผิดพลาดอยู่ใต้ช่อง Field ผูก id, aria-describedby และ aria-invalid ให้เอง

อีเมล

ใช้สำหรับเข้าสู่ระบบและรับใบเสร็จ

tsx

<Field label="อีเมล" hint="ใช้สำหรับเข้าสู่ระบบและรับใบเสร็จ" required>
  <Input type="email" autoComplete="email" />
</Field>

บอกว่าผิดอะไรและแก้อย่างไร แสดงหลังผู้ใช้ออกจากช่องหรือกดส่ง ไม่ใช่ระหว่างพิมพ์

เบอร์โทรศัพท์

ใส่เบอร์ 10 หลัก เช่น 0812345678

tsx

<Field label="เบอร์โทรศัพท์" error="ใส่เบอร์ 10 หลัก เช่น 0812345678">
  <Input type="tel" defaultValue="08123" />
</Field>

ถ้าฟอร์มส่วนใหญ่บังคับ ให้ติดป้ายเฉพาะช่องที่ไม่บังคับ

ชื่อโรงเรียน(ไม่บังคับ)

tsx

<Field label="ชื่อโรงเรียน" optional>
  <Input />
</Field>

Prop	Type	Default	คำอธิบาย
`label`	`ReactNode`	`-`	ป้ายกำกับที่มองเห็น บังคับ
`hint`	`ReactNode`	`-`	คำแนะนำใต้ช่อง ผูกด้วย aria-describedby
`error`	`ReactNode`	`-`	ข้อความผิดพลาด ตั้ง aria-invalid ให้ช่องกรอก
`required`	`boolean`	`false`	เครื่องหมาย * และ required บนช่องกรอก
`optional`	`boolean`	`false`	ป้าย (ไม่บังคับ)
`aside`	`ReactNode`	`-`	ด้านขวาของแถวป้าย เช่น ตัวนับหรือลิงก์ลืมรหัสผ่าน
`children`	`ReactElement`	`-`	ช่องกรอกหนึ่งตัว

ควรทำ

ไม่ควรทำ