Formulir & Masukan
Checkbox & Radio (Kotak Centang & Tombol Pilihan)
Pilihan ganda dan tunggal untuk persetujuan syarat ketentuan atau pemilihan opsi layanan.
Elemen Checkbox (.mjl-checkbox) dan Radio (.mjl-radio) telah dilengkapi dengan target klik minimum 44px melalui pembungkus label, memastikan warga tidak kesulitan menekan opsi kecil pada smartphone.
1. Pratinjau Kotak Centang (Checkbox)
Persetujuan Formulir
2. Pratinjau Tombol Pilihan (Radio Button)
Metode Pengambilan Dokumen Fisik
Pilih Cara Pengambilan:
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-control-group">
<input type="checkbox" name="setuju" class="mjl-checkbox" required>
<span>Saya menyatakan data yang diisi adalah benar.</span>
</label>
<fieldset>
<legend class="mjl-label">Jenis Kelamin</legend>
<label class="mjl-control-group"><input type="radio" name="jk" value="L" class="mjl-radio"> <span>Laki-laki</span></label>
<label class="mjl-control-group"><input type="radio" name="jk" value="P" class="mjl-radio"> <span>Perempuan</span></label>
</fieldset>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlCheckbox, MjlRadio } from '@majalengka/vue';
const setuju = ref(false);
const jk = ref('');
</script>
<template>
<MjlCheckbox v-model="setuju" required>Saya menyatakan data yang diisi adalah benar.</MjlCheckbox>
<fieldset>
<legend class="mjl-label">Jenis Kelamin</legend>
<MjlRadio v-model="jk" name="jk" value="L">Laki-laki</MjlRadio>
<MjlRadio v-model="jk" name="jk" value="P">Perempuan</MjlRadio>
</fieldset>
</template>
import { useState } from 'react';
export function Persetujuan() {
const [setuju, setSetuju] = useState(false);
const [jk, setJk] = useState('');
return (
<>
<label className="mjl-control-group">
<input type="checkbox" className="mjl-checkbox" checked={setuju} onChange={(e) => setSetuju(e.target.checked)} required />
<span>Saya menyatakan data yang diisi adalah benar.</span>
</label>
<fieldset>
<legend className="mjl-label">Jenis Kelamin</legend>
{[['L', 'Laki-laki'], ['P', 'Perempuan']].map(([v, l]) => (
<label key={v} className="mjl-control-group">
<input type="radio" name="jk" value={v} className="mjl-radio" checked={jk === v} onChange={() => setJk(v)} />
<span>{l}</span>
</label>
))}
</fieldset>
</>
);
}
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-persetujuan',
standalone: true,
template: `
<label class="mjl-control-group">
<input type="checkbox" class="mjl-checkbox" [checked]="setuju()" (change)="setuju.set($any($event.target).checked)" required />
<span>Saya menyatakan data yang diisi adalah benar.</span>
</label>
<fieldset>
<legend class="mjl-label">Jenis Kelamin</legend>
@for (o of opsi; track o.value) {
<label class="mjl-control-group">
<input type="radio" name="jk" class="mjl-radio" [value]="o.value" [checked]="jk() === o.value" (change)="jk.set(o.value)" />
<span>{{ o.label }}</span>
</label>
}
</fieldset>
`,
})
export class Persetujuan {
setuju = signal(false);
jk = signal('');
opsi = [{ value: 'L', label: 'Laki-laki' }, { value: 'P', label: 'Perempuan' }];
}
<label class="mjl-control-group">
<input type="checkbox" name="setuju" value="1" class="mjl-checkbox" @checked(old('setuju')) required>
<span>Saya menyatakan data yang diisi adalah benar.</span>
</label>
<fieldset>
<legend class="mjl-label">Jenis Kelamin</legend>
@foreach (['L' => 'Laki-laki', 'P' => 'Perempuan'] as $nilai => $label)
<label class="mjl-control-group">
<input type="radio" name="jk" value="{{ $nilai }}" class="mjl-radio" @checked(old('jk') === $nilai)>
<span>{{ $label }}</span>
</label>
@endforeach
</fieldset>
<label class="mjl-control-group">
<input type="checkbox" name="setuju" value="1" class="mjl-checkbox" <?= !empty($_POST['setuju']) ? 'checked' : '' ?> required>
<span>Saya menyatakan data yang diisi adalah benar.</span>
</label>
<fieldset>
<legend class="mjl-label">Jenis Kelamin</legend>
<?php foreach (['L' => 'Laki-laki', 'P' => 'Perempuan'] as $nilai => $label): ?>
<label class="mjl-control-group">
<input type="radio" name="jk" value="<?= $nilai ?>" class="mjl-radio" <?= ($_POST['jk'] ?? '') === $nilai ? 'checked' : '' ?>>
<span><?= $label ?></span>
</label>
<?php endforeach; ?>
</fieldset>