Input Component

InputComponent adalah komponen input paling lengkap di Next-Light. Komponen ini mendukung label, tip, ikon kiri/kanan, validasi, auto-formatting, suggestion autocomplete, hingga mode multiple value seperti input tag. Komponen ini dirancang agar bisa menjadi input utama untuk berbagai kebutuhan form.

Contoh Penggunaan

Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5

Input Number:

Kode berhasil di copy!
5

Input Currency:

Kode berhasil di copy!
5

Input Date:

Kode berhasil di copy!
5

Input Time:

Kode berhasil di copy!
5

Input Datetime:

Kode berhasil di copy!
5

Input Select:

Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5

Input Checkbox & Radio Button:

Kode berhasil di copy!
5
Kode berhasil di copy!
5
Kode berhasil di copy!
5

Properti Bawaan:

name : string

nama input atau key value input.

Kode berhasil di copy!
5

label : string

Teks label input.

Kode berhasil di copy!
5

placeholder : string

Placeholder input.

Kode berhasil di copy!
5

tip : string

Teks informasi kecil di bawah label.

Kode berhasil di copy!
5

leftIcon / rightIcon : FontAwesomeIcon

Ikon kiri atau kanan.

Kode berhasil di copy!
5

invalid : string

Pesan error input.

Kode berhasil di copy!
5

onlyAlphabet : boolean

Memaksa input hanya berisi huruf.

Kode berhasil di copy!
5

uppercase / lowercase : boolean

Memaksa input menjadi huruf kapital / kecil.

Kode berhasil di copy!
5

suggestions : string[]

Daftar saran untuk autocomplete.

Kode berhasil di copy!
5

options : { label: string | ReactNode, value: string | number }[]

Pilihan value untuk Select, InputCheckbox, dan InputRadio.

Kode berhasil di copy!
5

multiple : boolean

Mode multi-value seperti tag input.

Kode berhasil di copy!
5

onChange : (value: string | number | string[] | number[] | File) => void

Callback perubahan nilai input.

Kode berhasil di copy!
5

className : string

Mendukung custom styling menggunakan prefix: label::, tip::, error::, icon::, suggest::, suggest-item::.

Kode berhasil di copy!
5