Formulir & Masukan
InputGroup & ButtonGroup
Menggabungkan kolom masukan dengan tombol atau label awalan tanpa celah garis ganda.
Komponen untuk merangkai input teks berdampingan dengan tombol pencarian atau addon satuan mata uang / domain.
Pratinjau Komponen
<!-- Input dengan Addon Prefix -->
<div class="mjl-input-group">
<span class="mjl-input-group__addon">Rp</span>
<input type="text" class="mjl-input" placeholder="0">
<span class="mjl-input-group__addon">,00</span>
</div>
<!-- Button Group -->
<div>
<span style="font-size: 13px; font-weight: 500; display: block; margin-bottom: 8px;">Tampilan Daftar:</span>
<div class="mjl-btn-group">
<button class="mjl-btn mjl-btn--secondary mjl-btn--sm">Harian</button>
<button class="mjl-btn mjl-btn--primary mjl-btn--sm">Mingguan</button>
<button class="mjl-btn mjl-btn--secondary mjl-btn--sm">Bulanan</button>
</div>
</div>
Penggunaan CSS Murni
<!-- Input + Tombol -->
<div class="mjl-input-group">
<input type="search" class="mjl-input" placeholder="Cari layanan...">
<button class="mjl-btn mjl-btn--primary mjl-btn--md">Cari</button>
</div>
<!-- Kelompok Tombol Bersebelahan -->
<div class="mjl-btn-group">
<button class="mjl-btn mjl-btn--secondary mjl-btn--sm">Kiri</button>
<button class="mjl-btn mjl-btn--secondary mjl-btn--sm">Tengah</button>
<button class="mjl-btn mjl-btn--secondary mjl-btn--sm">Kanan</button>
</div>
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-input-group">
<span class="mjl-input-group__addon">Rp</span>
<input id="nominal" class="mjl-input" inputmode="numeric" aria-label="Nominal retribusi">
</div>
<div class="mjl-btn-group" role="group" aria-label="Format unduhan">
<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--sm">PDF</button>
<button type="button" class="mjl-btn mjl-btn--secondary mjl-btn--sm">Excel</button>
</div>
<script setup lang="ts">
import { ref } from 'vue';
import { MjlInputGroup, MjlInput, MjlButtonGroup, MjlButton } from '@majalengka/vue';
const nominal = ref('');
</script>
<template>
<MjlInputGroup prefix="Rp">
<MjlInput id="nominal" v-model="nominal" inputmode="numeric" aria-label="Nominal retribusi" />
</MjlInputGroup>
<MjlButtonGroup label="Format unduhan">
<MjlButton variant="secondary" size="sm">PDF</MjlButton>
<MjlButton variant="secondary" size="sm">Excel</MjlButton>
</MjlButtonGroup>
</template>
import type { ReactNode } from 'react';
export function MjlInputGroup({ prefix, suffix, children }: { prefix?: ReactNode; suffix?: ReactNode; children: ReactNode }) {
return (
<div className="mjl-input-group">
{prefix && <span className="mjl-input-group__addon">{prefix}</span>}
{children}
{suffix && <span className="mjl-input-group__addon">{suffix}</span>}
</div>
);
}
// Pemakaian
export const Nominal = () => (
<MjlInputGroup prefix="Rp">
<input className="mjl-input" inputMode="numeric" aria-label="Nominal retribusi" />
</MjlInputGroup>
);
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-input-group',
standalone: true,
template: `
<div class="mjl-input-group">
@if (prefix()) { <span class="mjl-input-group__addon">{{ prefix() }}</span> }
<ng-content />
@if (suffix()) { <span class="mjl-input-group__addon">{{ suffix() }}</span> }
</div>
`,
})
export class MjlInputGroup {
prefix = input<string>();
suffix = input<string>();
}
// Pemakaian: <mjl-input-group prefix="Rp"><input class="mjl-input" aria-label="Nominal" /></mjl-input-group>
<div class="mjl-input-group">
<span class="mjl-input-group__addon">Rp</span>
<input id="nominal" name="nominal" class="mjl-input" inputmode="numeric"
aria-label="Nominal retribusi" value="{{ old('nominal') }}">
</div>
<div class="mjl-input-group">
<span class="mjl-input-group__addon">Rp</span>
<input id="nominal" name="nominal" class="mjl-input" inputmode="numeric" aria-label="Nominal retribusi"
value="<?= htmlspecialchars($_POST['nominal'] ?? '', ENT_QUOTES, 'UTF-8') ?>">
</div>