Formulir & Masukan
Select (Menu Pilihan Dropdown)
Menu pilihan tarik-turun untuk memilih kecamatan, kelurahan, jenis perizinan, atau instansi tujuan.
Select (.mjl-select) memberikan antarmuka pilihan tunggal bagi warga. Didesain dengan tinggi sentuh 44px dan ikon panah bawah SVG yang tajam.
1. Pratinjau Select
Pratinjau Select
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.
<div class="mjl-form-field">
<label class="mjl-label" for="kecamatan">Kecamatan Domisili</label>
<select id="kecamatan" name="kecamatan" class="mjl-select" required>
<option value="" disabled selected>Pilih kecamatan...</option>
<option value="majalengka">Majalengka</option>
<option value="kadipaten">Kadipaten</option>
<option value="kertajati">Kertajati</option>
</select>
</div>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlFormField, MjlSelect } from '@majalengka/vue';
const kecamatan = ref('');
const opsi = [
{ value: 'majalengka', label: 'Majalengka' },
{ value: 'kadipaten', label: 'Kadipaten' },
{ value: 'kertajati', label: 'Kertajati' },
];
</script>
<template>
<MjlFormField id="kecamatan" label="Kecamatan Domisili" required>
<template #default="{ id }">
<MjlSelect :id="id" v-model="kecamatan" :options="opsi" placeholder="Pilih kecamatan..." required />
</template>
</MjlFormField>
</template>
import { useState } from 'react';
const KECAMATAN = [
{ value: 'majalengka', label: 'Majalengka' },
{ value: 'kadipaten', label: 'Kadipaten' },
{ value: 'kertajati', label: 'Kertajati' },
];
export function PilihKecamatan() {
const [kecamatan, setKecamatan] = useState('');
return (
<div className="mjl-form-field">
<label className="mjl-label" htmlFor="kecamatan">Kecamatan Domisili</label>
<select id="kecamatan" className="mjl-select" required value={kecamatan} onChange={(e) => setKecamatan(e.target.value)}>
<option value="" disabled>Pilih kecamatan...</option>
{KECAMATAN.map((k) => <option key={k.value} value={k.value}>{k.label}</option>)}
</select>
</div>
);
}
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-pilih-kecamatan',
standalone: true,
imports: [FormsModule],
template: `
<div class="mjl-form-field">
<label class="mjl-label" for="kecamatan">Kecamatan Domisili</label>
<select id="kecamatan" class="mjl-select" required [ngModel]="kecamatan()" (ngModelChange)="kecamatan.set($event)">
<option value="" disabled>Pilih kecamatan...</option>
@for (k of opsi; track k.value) { <option [value]="k.value">{{ k.label }}</option> }
</select>
</div>
`,
})
export class PilihKecamatan {
kecamatan = signal('');
opsi = [{ value: 'majalengka', label: 'Majalengka' }, { value: 'kadipaten', label: 'Kadipaten' }];
}
<div class="mjl-form-field">
<label class="mjl-label" for="kecamatan">Kecamatan Domisili</label>
<select id="kecamatan" name="kecamatan" required
@class(['mjl-select', 'mjl-select--error' => $errors->has('kecamatan')])>
<option value="" disabled @selected(! old('kecamatan'))>Pilih kecamatan...</option>
@foreach ($kecamatan as $k)
<option value="{{ $k->kode }}" @selected(old('kecamatan') === $k->kode)>{{ $k->nama }}</option>
@endforeach
</select>
</div>
<?php $daftar = ['majalengka' => 'Majalengka', 'kadipaten' => 'Kadipaten', 'kertajati' => 'Kertajati']; ?>
<div class="mjl-form-field">
<label class="mjl-label" for="kecamatan">Kecamatan Domisili</label>
<select id="kecamatan" name="kecamatan" class="mjl-select" required>
<option value="" disabled <?= empty($_POST['kecamatan']) ? 'selected' : '' ?>>Pilih kecamatan...</option>
<?php foreach ($daftar as $kode => $nama): ?>
<option value="<?= $kode ?>" <?= ($_POST['kecamatan'] ?? '') === $kode ? 'selected' : '' ?>><?= htmlspecialchars($nama) ?></option>
<?php endforeach; ?>
</select>
</div>