David/WORKFLOW-APP
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use type=tel for all ID number fields to trigger numeric keypad on mobile

Browse source
This commit is contained in:
SJCoetz 2026-07-30 17:53:41 +02:00
parent adead9148f
commit 2d06ca27d6
5 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/AddEntityModal.tsx
View file

@ -211,7 +211,7 @@ export default function AddEntityModal({ entity, open, onClose }: Props) {
</label>
<input
id="idNo"
type="text"
type="tel"
value={idNo}
onChange={(e) => setIdNo(e.target.value.replace(/\D/g, "").slice(0, 13))}
className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg placeholder:text-muted focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent font-mono"

1
components/DirectorForm.tsx
View file

@ -82,6 +82,7 @@ export default function DirectorForm({ director: d, onUpdate, index }: Props) {
</FormField>
<FormField label="SA ID number">
<input
type="tel"
className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors"
placeholder="13-digit SA ID"
maxLength={13}

2
components/DirectorStep.tsx
View file

@ -75,7 +75,7 @@ export default function DirectorStep({ director: d, index, onUpdate }: Props) {
</div>
<div className="space-y-1.5">
<label className="text-sm font-semibold text-fg">SA ID number</label>
<input className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="13-digit SA ID" maxLength={13} value={d.id_no} onChange={(e) => onUpdate({ id_no: e.target.value })} />
<input type="tel" className="w-full bg-surface border border-border rounded px-3 py-2 text-sm text-fg placeholder-muted focus:outline-none focus:border-accent transition-colors" placeholder="13-digit SA ID" maxLength={13} value={d.id_no} onChange={(e) => onUpdate({ id_no: e.target.value })} />
</div>
<div className="space-y-1.5">
<label className="text-sm font-semibold text-fg">Date of birth</label>

2
components/EditEntityModal.tsx
View file

@ -214,7 +214,7 @@ export default function EditEntityModal({ entity, record, open, onClose, onAfter
<div>
<label className="block text-sm font-semibold text-fg mb-1.5" htmlFor="edit-idno">SA ID number <span className="text-xs text-muted font-normal">(optional)</span></label>
<input id="edit-idno" type="text" value={idNo}
<input id="edit-idno" type="tel" value={idNo}
onChange={(e) => setIdNo(e.target.value.replace(/\D/g, "").slice(0, 13))}
className="w-full rounded-lg border border-border bg-surface-warm px-3 py-2.5 text-sm text-fg font-mono focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent"
maxLength={13} />

2
components/OnboardingWizard.tsx
View file

@ -802,7 +802,7 @@ function DirectorsStep({
</Field>
<Field label="ID number" required hint="13 digits, no spaces">
<input
type="text"
type="tel"
inputMode="numeric"
pattern="\d{13}"
maxLength={13}