Formulir & Masukan
Input (Kolom Isian Teks)
Kolom input tunggal untuk mengetik nama, NIK, nomor WhatsApp, alamat, dan kata sandi.
Input (.mjl-input) adalah elemen masukan dasar yang telah dikalibrasi dengan tinggi minimum 44px untuk memenuhi kepatuhan standar aksesibilitas gawai layar sentuh.
1. Pratinjau Tipe Input
Tipe-Tipe Input
2. Input Khusus NIK & Nomor Ponsel
Ketika meminta input angka pada gawai seluler warga (seperti NIK 16 digit atau nomor telepon), selalu tambahkan atribut:
inputmode="numeric": memunculkan papan ketik angka secara langsung di smartphone Android dan iOS.autocomplete="tel"atauautocomplete="off"sesuai konteks privasi.
3. Status Visual Input
| Status | Tampilan Visual | Kapan Muncul |
|---|---|---|
| Normal | Border netral #DFE3EA, latar putih | Kondisi awal siap diisi |
Fokus (:focus) | Border Biru Majalengka 700 (#0014A8), bayangan cincin fokus | Pengguna sedang aktif mengetik di kolom |
Error (--error) | Border merah status #B3261E, latar merah muda sangat lembut | Validasi gagal, NIK tidak 16 digit |
| Disabled | Border abu-abu, latar #EEF0F4, kursor tidak diizinkan | Kolom terkunci oleh sistem atau menunggu aksi sebelumnya |
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<label class="mjl-label" for="nama">Nama Lengkap</label>
<input id="nama" name="nama" type="text" class="mjl-input" autocomplete="name">
<label class="mjl-label" for="nik">NIK</label>
<input id="nik" name="nik" class="mjl-input" inputmode="numeric" pattern="[0-9]*" maxlength="16">
<script setup lang="ts">
import { ref } from 'vue';
import { MjlInput } from '@majalengka/vue';
const nama = ref('');
const nik = ref('');
</script>
<template>
<label class="mjl-label" for="nama">Nama Lengkap</label>
<MjlInput id="nama" v-model="nama" autocomplete="name" />
<label class="mjl-label" for="nik">NIK</label>
<MjlInput id="nik" v-model="nik" inputmode="numeric" maxlength="16" />
</template>
import { useState, type InputHTMLAttributes } from 'react';
export function MjlInput({ hasError, className = '', ...rest }: InputHTMLAttributes<HTMLInputElement> & { hasError?: boolean }) {
return <input className={`mjl-input ${hasError ? 'mjl-input--error' : ''} ${className}`} aria-invalid={hasError || undefined} {...rest} />;
}
// Pemakaian
export function FormNama() {
const [nama, setNama] = useState('');
return (
<>
<label className="mjl-label" htmlFor="nama">Nama Lengkap</label>
<MjlInput id="nama" value={nama} onChange={(e) => setNama(e.target.value)} autoComplete="name" />
</>
);
}
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-form-nama',
standalone: true,
imports: [FormsModule],
template: `
<label class="mjl-label" for="nama">Nama Lengkap</label>
<input id="nama" class="mjl-input" autocomplete="name" [ngModel]="nama()" (ngModelChange)="nama.set($event)" />
`,
})
export class FormNama {
nama = signal('');
}
<label class="mjl-label" for="nama">Nama Lengkap</label>
<input id="nama" name="nama" autocomplete="name" value="{{ old('nama', $warga->nama ?? '') }}"
@class(['mjl-input', 'mjl-input--error' => $errors->has('nama')])>
<label class="mjl-label" for="nama">Nama Lengkap</label>
<input id="nama" name="nama" class="mjl-input" autocomplete="name"
value="<?= htmlspecialchars($_POST['nama'] ?? '', ENT_QUOTES, 'UTF-8') ?>">