Text Input - Vue

Text Input

ReactVueJS + CSS

Impor

Copy

import { TextField } from '@idds/vue';

Contoh Penggunaan

TextField

Contoh 1 - Basic TextField

PreviewCode

Contoh 2 - TextField with Status

PreviewCode

TextArea

Contoh 3 - Basic TextArea

PreviewCode

Contoh 4 - TextArea with Features

PreviewCode

PasswordInput

Contoh 5 - Basic PasswordInput

PreviewCode

Contoh 6 - PasswordInput with Validation

PreviewCode

PhoneInput

Contoh 7 - Basic PhoneInput

PreviewCode

Props

TextField

Name	Type	Default	Required	Description
value	string	—	Yes	Nilai controlled untuk input.
onChange	(val: string) => void	—	Yes	Callback yang dipanggil ketika nilai berubah.
onInput?	(event: ChangeEvent<HTMLInputElement>) => void	—	No	Callback yang memberikan akses ke event object lengkap.
label?	ReactNode	—	No	Label yang ditampilkan di atas input.
placeholder?	string	—	No	Placeholder text untuk input.
type?	'text' | 'email' | 'password' | 'number' | 'tel' | 'url'	'text'	No	Tipe input HTML.
size?	'sm' | 'md' | 'lg'	'md'	No	Ukuran input.
status?	'neutral' | 'error' | 'warning' | 'success'	'neutral'	No	Status visual input.
statusMessage?	ReactNode	—	No	Pesan yang ditampilkan sesuai status (override helperText jika status≠neutral).
helperText?	ReactNode	—	No	Teks bantuan yang ditampilkan di bawah input.
disabled?	boolean	false	No	Nonaktifkan input.
required?	boolean	false	No	Tandai field sebagai required.
prefixIcon?	ReactNode	—	No	Icon yang ditampilkan di depan input.
suffixIcon?	ReactNode	—	No	Icon yang ditampilkan di belakang input (setelah clear button).
maxLength?	number	—	No	Maksimum panjang karakter.
showCharCount?	boolean	false	No	Tampilkan penghitung karakter (current/maxLength).
showClearButton?	boolean	true	No	Tampilkan tombol clear (IconX) jika ada teks.
onClear?	() => void	—	No	Callback saat tombol clear diklik.
debounce?	number	0	No	Debounce ms untuk onChangeDebounced.
onChangeDebounced?	(val: string) => void	—	No	Callback setelah debounce ms.
className?	string	—	No	ClassName tambahan untuk wrapper.
securityConfig?	SecurityConfig	—	No	Konfigurasi keamanan seperti XSS protection.

TextArea

Name	Type	Default	Required	Description
value	string	—	Yes	Nilai controlled untuk textarea.
onChange	(val: string) => void	—	Yes	Callback yang dipanggil ketika nilai berubah.
label?	ReactNode	—	No	Label yang ditampilkan di atas textarea.
placeholder?	string	—	No	Placeholder text untuk textarea.
status?	'neutral' | 'error' | 'warning' | 'success'	'neutral'	No	Status visual textarea.
statusMessage?	ReactNode	—	No	Pesan yang ditampilkan sesuai status.
helperText?	ReactNode	—	No	Teks bantuan yang ditampilkan di bawah textarea.
disabled?	boolean	false	No	Nonaktifkan textarea.
required?	boolean	false	No	Tandai field sebagai required.
prefixIcon?	ReactNode	—	No	Icon yang ditampilkan di depan textarea.
suffixIcon?	ReactNode	—	No	Icon yang ditampilkan di belakang textarea.
maxLength?	number	—	No	Maksimum panjang karakter.
showCharCount?	boolean	false	No	Tampilkan penghitung karakter.
showClearButton?	boolean	true	No	Tampilkan tombol clear.
minRows?	number	3	No	Baris minimal untuk autosize.
maxRows?	number	—	No	Baris maksimal untuk autosize.
debounce?	number	0	No	Debounce ms untuk onChangeDebounced.
onChangeDebounced?	(val: string) => void	—	No	Callback setelah debounce ms.
className?	string	—	No	ClassName tambahan untuk wrapper.

PasswordInput

Name	Type	Default	Required	Description
value	string	—	Yes	Nilai controlled untuk password input.
onChange	(val: string) => void	—	Yes	Callback yang dipanggil ketika nilai berubah.
label?	ReactNode	—	No	Label yang ditampilkan di atas input.
placeholder?	string	—	No	Placeholder text untuk input.
status?	'neutral' | 'error' | 'warning' | 'success'	'neutral'	No	Status visual input.
statusMessage?	ReactNode	—	No	Pesan yang ditampilkan sesuai status.
helperText?	ReactNode	—	No	Teks bantuan yang ditampilkan di bawah input.
size?	'sm' | 'md' | 'lg'	'md'	No	Ukuran input.
disabled?	boolean	false	No	Nonaktifkan input.
required?	boolean	false	No	Tandai field sebagai required.
prefixIcon?	ReactNode	—	No	Icon yang ditampilkan di depan input.
maxLength?	number	—	No	Maksimum panjang karakter.
showCharCount?	boolean	false	No	Tampilkan penghitung karakter.
debounce?	number	0	No	Debounce ms untuk onChangeDebounced.
onChangeDebounced?	(val: string) => void	—	No	Callback setelah debounce ms.
className?	string	—	No	ClassName tambahan untuk wrapper.

PhoneInput

Name	Type	Default	Required	Description
value?	string	—	No	Nilai controlled untuk phone input (format E.164).
onChange?	(val: string) => void	—	No	Callback yang dipanggil ketika nilai berubah.
label?	ReactNode	—	No	Label yang ditampilkan di atas input.
placeholder?	string	—	No	Placeholder text untuk input.
size?	'sm' | 'md' | 'lg'	'md'	No	Ukuran input.
status?	'neutral' | 'success' | 'error' | 'warning'	'neutral'	No	Status visual input.
statusMessage?	ReactNode	—	No	Pesan yang ditampilkan sesuai status.
helperText?	ReactNode	—	No	Teks bantuan yang ditampilkan di bawah input.
disabled?	boolean	false	No	Nonaktifkan input.
readonly?	boolean	false	No	Buat input menjadi readonly.
required?	boolean	false	No	Tandai field sebagai required.
defaultCountry?	string	'ID'	No	Kode negara default (2 huruf ISO).
countries?	Country[]	—	No	Daftar negara untuk dropdown.
className?	string	—	No	ClassName tambahan untuk wrapper.

Di halaman ini

• Impor
• Contoh Penggunaan
• Props