AVertical
Default untuk form panjang dan mobile.
Core Form Components
Primitive form reusable untuk seluruh ekosistem PA DEV Admin Theme.
Theme Demo · Form Components
Form yang konsisten, aksesibel, dan siap dipakai lintas project
Dua puluh dua primitive ini memakai token Foundation, label persisten, semantic state, dan API presentasi murni tanpa database atau business rule.
Single-line field
Text Input
Field teks reusable dengan variant, ukuran, adornment, helper, counter, dan validation state.
Preview & Variants
Variant default memakai token Foundation.
Variant filled memakai token Foundation.
Variant outline memakai token Foundation.
Variant soft memakai token Foundation.
Sizes
Hit area dan typography mengikuti skala XS.
Hit area dan typography mengikuti skala SM.
Hit area dan typography mengikuti skala MD.
Hit area dan typography mengikuti skala LG.
Hit area dan typography mengikuti skala XL.
States
State default.
State hover.
State focus.
State disabled.
State readonly.
Memuat field
State loading.
State error.
Nilai belum valid. Periksa kembali field ini.
State warning.
Nilai dapat digunakan, tetapi perlu diperiksa kembali.
State success.
Nilai sudah valid.
Features
Sesuai identitas resmi.
Rp
,00
Prefix dan suffix tidak menjadi bagian nilai.
Icon bersifat dekoratif.
Clear action dan counter bersifat progressive enhancement.
10 / 16 karakter
Variants
Default · Filled · Outline · Soft · prefix/suffix/icon
Sizes
XS · SM · MD · LG · XL
States
Default · Hover · Focus · Disabled · Readonly · Loading · Error · Warning · Success
- Accessibility
- Label/id/for terhubung, aria-describedby merujuk helper atau validation, required dan readonly memakai semantic attribute.
- Usage
- Gunakan label persisten dan pilih satu helper yang paling membantu; placeholder tidak menggantikan label.
- Token
--color-* · --space-* · --radius-md · --duration-fast
Multiline field
Textarea
Input multiline untuk deskripsi atau catatan dengan resize, counter, helper, dan auto-height preview.
Preview · Variants & States
Resize vertikal aktif.
43 / 160 karakter
Resize dinonaktifkan.
JavaScript hanya menyesuaikan tinggi.
Minimal 30 karakter.
Deskripsi belum memenuhi format.
15 / 120 karakter
Disabled memakai semantic attribute.
Readonly tetap dapat difokuskan dan disalin.
Variants
Resizable · Fixed · Auto height · Counter
Sizes
Rows 2–4 · content driven
States
Default · Error · Disabled · Readonly
- Accessibility
- Label eksplisit, maxlength, counter terdeskripsi, disabled/readonly native, serta error dekat field.
- Usage
- Gunakan fixed hanya jika ruang layout harus stabil; berikan batas karakter yang masuk akal.
- Token
Text Input primitive · --radius-md · --space-12
Secure entry
Password Input
Field password dengan show/hide, strength preview, serta state error, success, disabled, dan loading.
Preview · Strength & States
Gunakan minimal 8 karakter dengan kombinasi yang kuat.
Kekuatan: Sedang
Gunakan minimal 8 karakter dengan kombinasi yang kuat.
Kekuatan: Lemah
Gunakan minimal 8 karakter dengan kombinasi yang kuat.
Kekuatan: Kuat
Password memenuhi ketentuan.
Gunakan minimal 8 karakter dengan kombinasi yang kuat.
Kekuatan: Lemah
Password belum memenuhi ketentuan.
Gunakan minimal 8 karakter dengan kombinasi yang kuat.
Kekuatan: Sedang
Memuat password
Gunakan minimal 8 karakter dengan kombinasi yang kuat.
Kekuatan: Sedang
Variants
Show / Hide · Weak / Medium / Strong
Sizes
MD
States
Default · Error · Success · Disabled · Loading
- Accessibility
- Toggle memiliki accessible name dinamis, aria-pressed, status strength berbentuk teks, dan field tetap berlabel.
- Usage
- Gunakan autocomplete yang sesuai konteks; strength meter hanya pendamping, bukan satu-satunya aturan validasi.
- Token
Text Input primitive · semantic tokens · --duration-fast
Compound field
Input Group
Komposisi satu field dengan prefix, suffix, icon, atau action yang masih membentuk satu control group.
Preview · Variants
Addon memberi konteks tetap pada nilai input.
Addon memberi konteks tetap pada nilai input.
Addon memberi konteks tetap pada nilai input.
Addon memberi konteks tetap pada nilai input.
Addon memberi konteks tetap pada nilai input.
Addon memberi konteks tetap pada nilai input.
Variants
Currency · Search · URL · Prefix · Suffix · Button · Icon
Sizes
MD · responsive width
States
Default · Disabled supported
- Accessibility
- Satu label untuk satu input; addon dekoratif tersembunyi dari screen reader dan button mempunyai nama jelas.
- Usage
- Pakai addon hanya saat unit atau konteks memang permanen; jangan memenuhi field dengan aksi sekunder.
- Token
Text Input primitive · Button primitive · --color-border
Find pattern
Search Input
Field pencarian dengan icon, clear action, loading, dan suggestion placeholder visual.
Preview · States
Ketik kata kunci untuk menyaring data.
Ketik kata kunci untuk menyaring data.
Mencari data
Ketik kata kunci untuk menyaring data.
Ketik kata kunci untuk menyaring data.
PA DEV Framework
PA DEV Admin Theme
PA DEV Design System
Variants
Icon · Clear · Loading · Suggestion placeholder
Sizes
MD · responsive width
States
Empty · With value · Loading · Suggestions
- Accessibility
- type search, autocomplete sesuai konteks, clear button berlabel, loading berstatus, dan suggestion region berlabel.
- Usage
- Gunakan untuk pencarian eksplisit; suggestion pada fase ini hanya pola presentasi tanpa data source.
- Token
Text Input primitive · icon system · --shadow-lg
Field feedback
Validation
Pesan default, success, warning, dan danger yang konsisten untuk helper maupun validasi inline.
Preview · Variants & Inline
Gunakan format yang tercantum pada helper.
Data berhasil diverifikasi.
Data dapat disimpan, tetapi sebaiknya ditinjau.
Field wajib diisi dengan format yang benar.
Tersedia
Variants
Default · Success · Warning · Danger · Inline
Sizes
Block · Inline
States
Informative · Status · Alert
- Accessibility
- Danger memakai role alert; status lain memakai role status; icon dan teks mencegah ketergantungan pada warna.
- Usage
- Letakkan pesan segera setelah field dan tulis tindakan koreksi yang spesifik.
- Token
semantic color tokens · Helper typography · icon 16px
Field identity
Label
Label normal, required, optional, description, dan floating preview untuk identitas field yang jelas.
Preview · Variants
Label persisten.
Atribut required dan penanda teks tersedia.
Optional dipakai secara selektif.
Helper tetap terpisah dari description.
Preview visual; label tetap elemen semantik.
Variants
Normal · Required · Optional · Description · Floating preview
Sizes
Small UI label
States
Persistent · Floating visual
- Accessibility
- Elemen label selalu mempunyai for yang menuju control; required bukan hanya tanda bintang.
- Usage
- Gunakan satu label singkat per field; optional hanya ditulis saat mayoritas field lain wajib.
- Token
Outfit small · --color-text-* · --space-4
Supporting copy
Helper
Teks pendukung untuk description, hint, error, success, dan character counter.
Preview · Variants
Description menjelaskan tujuan field sebelum interaksi.
Hint memberi petunjuk format yang ringkas.
Nilai belum sesuai format yang diminta.
Nilai sudah memenuhi ketentuan.
48 / 120 karakter
Variants
Description · Hint · Error · Success · Counter
Sizes
Helper 12/18
States
Neutral · Status · Alert
- Accessibility
- Setiap helper mempunyai id untuk aria-describedby; error/status memakai role yang tepat dan selalu bertuliskan pesan.
- Usage
- Gunakan satu pesan ringkas; pindahkan penjelasan panjang ke description sebelum field.
- Token
Outfit helper · semantic color tokens · icon 16px
Semantic grouping
Fieldset
Grouping semantik dengan legend, description, ritme field, dan nested preview.
Preview · Group Spacing & Nested
Variants
Legend · Description · Group spacing · Nested preview
Sizes
Content driven · responsive
States
Default · Disabled supported
- Accessibility
- fieldset/legend native, description direferensikan aria-describedby, dan setiap nested field tetap berlabel.
- Usage
- Gunakan untuk kumpulan field yang membentuk satu topik; hindari nesting lebih dari satu tingkat.
- Token
--space-16/24 · --radius-lg · --color-border
Native selection controls
Choice Controls
Checkbox, radio, switch, dan selectable card dengan native input sebagai source of truth.
Checkbox
States
Radio
States
Switch
Sizes
States
Selectable Card
Components
Checkbox · Radio · Switch · Selectable Card
Layouts
Vertical · Horizontal · Card
States
Default · Active · Mixed · Error · Disabled · Loading
- Accessibility
- Native input, label/id/for, fieldset/legend, described-by, invalid state, serta keyboard browser tetap dipertahankan.
- Usage
- Checkbox untuk multi-choice, radio untuk single-choice, switch untuk pengaturan langsung, dan card untuk pilihan dengan konteks tambahan.
- Token
--color-primary · --color-border · --radius-md/lg · --duration-fast
Composition patterns
Form Layout
Vertical, horizontal, dan inline layout untuk menjaga label, field, helper, serta action tetap mudah dipindai.
Horizontal
Label terpisah untuk desktop, stacked saat viewport sempit.
Inline
Ringkas untuk search, filter, dan quick action.
Patterns
Vertical · Horizontal · Inline
Responsive
Desktop row · Mobile stack
Contract
Persistent label · Helper · Action
- Usage
- Gunakan vertical untuk form panjang, horizontal untuk edit cepat, dan inline untuk toolbar atau filter.
Temporal input
Date & Time Components
Native temporal input dengan calendar popup ringan untuk pemilihan tanggal tunggal dan rentang.
Date Picker · States
Gunakan keyboard atau buka calendar popup.
Preview focus ring token.
Nilai tanggal telah terisi.
Native disabled semantic.
Dapat dibaca tanpa dapat diubah.
Tanggal wajib diisi.
Tanggal tersedia.
Wajib sebelum form dikirim.
Picker Variants
Time Picker
Format mengikuti locale browser.
DateTime Picker
Tanggal dan waktu dalam satu native control.
Month Picker
Native month selection.
Year Picker
Gunakan Arrow Up/Down untuk mengubah tahun.
Components
Date · Range · Time · DateTime · Month · Year
States
Default · Focus · Filled · Disabled · Readonly · Error · Success · Required
Behavior
Native fallback · Popup enhancement · Keyboard navigation
- Accessibility
- Label persisten, native temporal input, dialog berlabel, grid tanggal, Arrow keys, Enter, Escape, dan focus restoration.
- Usage
- Gunakan popup hanya saat context kalender membantu; native picker tetap menjadi fallback utama.
- Token
--color-primary · --color-border · --radius-lg · --shadow-lg · --duration-fast