Formulir & Masukan
Switch (Sakelar Pengaturan)
Kontrol toggle sakelar untuk mengaktifkan atau menonaktifkan fitur secara instan.
Switch digunakan untuk pengaturan biner (Ya/Tidak, Aktif/Nonaktif) yang efeknya langsung diterapkan tanpa perlu menekan tombol simpan terpisah.
Pratinjau Komponen
<label class="mjl-switch">
<input type="checkbox" class="mjl-switch__input">
<span class="mjl-switch__track">
<span class="mjl-switch__thumb"></span>
</span>
<span>Kirim salinan berkas ke email pribadi</span>
</label>
Penggunaan CSS Murni
<label class="mjl-switch">
<input type="checkbox" class="mjl-switch__input" checked>
<span class="mjl-switch__track">
<span class="mjl-switch__thumb"></span>
</span>
<span>Aktifkan status layanan</span>
</label>
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-switch">
<input type="checkbox" role="switch" class="mjl-switch__input" name="notif_wa" checked>
<span class="mjl-switch__track" aria-hidden="true"><span class="mjl-switch__thumb"></span></span>
<span>Notifikasi WhatsApp saat berkas diproses</span>
</label>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlSwitch } from '@majalengka/vue';
const notifWa = ref(true);
</script>
<template>
<MjlSwitch v-model="notifWa" label="Notifikasi WhatsApp saat berkas diproses" />
</template>
import { useState } from 'react';
export function MjlSwitch({ label, checked, onChange }: { label: string; checked: boolean; onChange: (v: boolean) => void }) {
return (
<label className="mjl-switch">
<input type="checkbox" role="switch" className="mjl-switch__input" checked={checked} onChange={(e) => onChange(e.target.checked)} />
<span className="mjl-switch__track" aria-hidden="true"><span className="mjl-switch__thumb" /></span>
<span>{label}</span>
</label>
);
}
export function Pengaturan() {
const [notif, setNotif] = useState(true);
return <MjlSwitch label="Notifikasi WhatsApp saat berkas diproses" checked={notif} onChange={setNotif} />;
}
import { Component, model, input } from '@angular/core';
@Component({
selector: 'mjl-switch',
standalone: true,
template: `
<label class="mjl-switch">
<input type="checkbox" role="switch" class="mjl-switch__input" [checked]="checked()" (change)="checked.set($any($event.target).checked)" />
<span class="mjl-switch__track" aria-hidden="true"><span class="mjl-switch__thumb"></span></span>
<span>{{ label() }}</span>
</label>
`,
})
export class MjlSwitch {
label = input.required<string>();
checked = model(false);
}
// Pemakaian: <mjl-switch label="Notifikasi WhatsApp" [(checked)]="notifWa" />
<input type="hidden" name="notif_wa" value="0">
<label class="mjl-switch">
<input type="checkbox" role="switch" class="mjl-switch__input" name="notif_wa" value="1"
@checked(old('notif_wa', $pengaturan->notif_wa))>
<span class="mjl-switch__track" aria-hidden="true"><span class="mjl-switch__thumb"></span></span>
<span>Notifikasi WhatsApp saat berkas diproses</span>
</label>
<input type="hidden" name="notif_wa" value="0">
<label class="mjl-switch">
<input type="checkbox" role="switch" class="mjl-switch__input" name="notif_wa" value="1" <?= $pengaturan['notif_wa'] ? 'checked' : '' ?>>
<span class="mjl-switch__track" aria-hidden="true"><span class="mjl-switch__thumb"></span></span>
<span>Notifikasi WhatsApp saat berkas diproses</span>
</label>
Memakai <input type="checkbox" role="switch"> sehingga pembaca layar mengumumkan status aktif/nonaktif.