dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update form input placeholders with descriptive examples for improved UX

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-14 02:17:27 +07:00
parent 26463c02a3
commit 57c311eaa1
7 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/components/LoginForm.vue
View File

@ -68,7 +68,7 @@ function submit() {
id="login" id="login"
v-model="form.login" v-model="form.login"
type="text" type="text"
placeholder="m@example.com" placeholder="Contoh: nama@perusahaan.com atau username"
required required
/> />
<FieldError :errors="formErrors(form, 'login')" /> <FieldError :errors="formErrors(form, 'login')" />

8
resources/js/components/admin/hr/EmployeeForm.vue
View File

@ -90,13 +90,13 @@ function submit() {
<FieldSet class="grid gap-4 md:grid-cols-3"> <FieldSet class="grid gap-4 md:grid-cols-3">
<Field> <Field>
<FieldLabel for="email" required>Email</FieldLabel> <FieldLabel for="email" required>Email</FieldLabel>
<Input id="email" v-model="form.email" type="email" placeholder="nama@perusahaan.com" <Input id="email" v-model="form.email" type="email" placeholder="Contoh: nama@perusahaan.com"
:maxlength="FIELD_LIMITS.email" /> :maxlength="FIELD_LIMITS.email" />
<FieldError :errors="formErrors(form, 'email')" /> <FieldError :errors="formErrors(form, 'email')" />
</Field> </Field>
<Field> <Field>
<FieldLabel for="username" required>Username</FieldLabel> <FieldLabel for="username" required>Username</FieldLabel>
<Input id="username" v-model="form.username" type="text" placeholder="username" <Input id="username" v-model="form.username" type="text" placeholder="Contoh: johndoe"
:maxlength="FIELD_LIMITS.username" /> :maxlength="FIELD_LIMITS.username" />
<FieldError :errors="formErrors(form, 'username')" /> <FieldError :errors="formErrors(form, 'username')" />
</Field> </Field>
@ -129,7 +129,7 @@ function submit() {
<Field class="md:col-span-3"> <Field class="md:col-span-3">
<FieldLabel for="full_name" required>Nama Lengkap</FieldLabel> <FieldLabel for="full_name" required>Nama Lengkap</FieldLabel>
<Input id="full_name" v-model="form.full_name" type="text" <Input id="full_name" v-model="form.full_name" type="text"
placeholder="Nama lengkap pegawai" :maxlength="FIELD_LIMITS.fullName" /> placeholder="Contoh: John Doe" :maxlength="FIELD_LIMITS.fullName" />
<FieldError :errors="formErrors(form, 'full_name')" /> <FieldError :errors="formErrors(form, 'full_name')" />
</Field> </Field>
<Field> <Field>
@ -157,7 +157,7 @@ function submit() {
</Field> </Field>
<Field class="md:col-span-3"> <Field class="md:col-span-3">
<FieldLabel for="address">Alamat</FieldLabel> <FieldLabel for="address">Alamat</FieldLabel>
<Textarea id="address" v-model="form.address" placeholder="Alamat lengkap" rows="3" /> <Textarea id="address" v-model="form.address" placeholder="Contoh: Jl. Sudirman No. 123, Jakarta" rows="3" />
<FieldError :errors="formErrors(form, 'address')" /> <FieldError :errors="formErrors(form, 'address')" />
</Field> </Field>
</FieldSet> </FieldSet>

2
resources/js/components/admin/hr/leave-requests/RejectLeaveRequestModal.vue
View File

@ -73,7 +73,7 @@ function submit() {
<FieldSet class="grid gap-4"> <FieldSet class="grid gap-4">
<Field> <Field>
<FieldLabel for="reject-reason" required>Alasan Penolakan</FieldLabel> <FieldLabel for="reject-reason" required>Alasan Penolakan</FieldLabel>
<Textarea id="reject-reason" v-model="form.reason" placeholder="Tuliskan alasan penolakan" <Textarea id="reject-reason" v-model="form.reason" placeholder="Contoh: Kuota cuti untuk bulan ini sudah habis"
rows="3" autofocus :maxlength="FIELD_LIMITS.reason" /> rows="3" autofocus :maxlength="FIELD_LIMITS.reason" />
<FieldError :errors="formErrors(form, 'reason')" /> <FieldError :errors="formErrors(form, 'reason')" />
</Field> </Field>

6
resources/js/components/admin/master/customers/CustomerFormModal.vue
View File

@ -97,20 +97,20 @@ function submit() {
<FieldSet class="grid gap-4"> <FieldSet class="grid gap-4">
<Field> <Field>
<FieldLabel for="customer-name" required>Nama</FieldLabel> <FieldLabel for="customer-name" required>Nama</FieldLabel>
<Input id="customer-name" v-model="form.name" type="text" placeholder="Nama customer" <Input id="customer-name" v-model="form.name" type="text" placeholder="Contoh: Budi Santoso"
autofocus :maxlength="FIELD_LIMITS.name" /> autofocus :maxlength="FIELD_LIMITS.name" />
<FieldError :errors="formErrors(form, 'name')" /> <FieldError :errors="formErrors(form, 'name')" />
</Field> </Field>
<Field> <Field>
<FieldLabel for="customer-phone-number">Nomor Telepon</FieldLabel> <FieldLabel for="customer-phone-number">Nomor Telepon</FieldLabel>
<PhoneNumberInput id="customer-phone-number" v-model="form.phone_number" <PhoneNumberInput id="customer-phone-number" v-model="form.phone_number"
placeholder="Nomor telepon customer" /> placeholder="Contoh: 08123456789" />
<FieldError :errors="formErrors(form, 'phone_number')" /> <FieldError :errors="formErrors(form, 'phone_number')" />
</Field> </Field>
<Field> <Field>
<FieldLabel for="customer-address">Alamat</FieldLabel> <FieldLabel for="customer-address">Alamat</FieldLabel>
<Textarea id="customer-address" v-model="form.address" rows="3" <Textarea id="customer-address" v-model="form.address" rows="3"
placeholder="Alamat customer" /> placeholder="Contoh: Jl. Mawar No. 12, Surabaya" />
<FieldError :errors="formErrors(form, 'address')" /> <FieldError :errors="formErrors(form, 'address')" />
</Field> </Field>
</FieldSet> </FieldSet>

2
resources/js/components/admin/master/raw-materials/RawMaterialForm.vue
View File

@ -230,7 +230,7 @@ function submit() {
<FieldSet class="grid gap-4 md:grid-cols-2"> <FieldSet class="grid gap-4 md:grid-cols-2">
<Field> <Field>
<FieldLabel for="name" required>Nama Bahan Baku</FieldLabel> <FieldLabel for="name" required>Nama Bahan Baku</FieldLabel>
<Input id="name" v-model="form.name" type="text" placeholder="Masukkan nama bahan baku" <Input id="name" v-model="form.name" type="text" placeholder="Contoh: Kain Katun Premium"
:maxlength="FIELD_LIMITS.name" /> :maxlength="FIELD_LIMITS.name" />
<FieldError :errors="formErrors(form, 'name')" /> <FieldError :errors="formErrors(form, 'name')" />
</Field> </Field>

6
resources/js/components/admin/master/suppliers/SupplierFormModal.vue
View File

@ -97,20 +97,20 @@ function submit() {
<FieldSet class="grid gap-4"> <FieldSet class="grid gap-4">
<Field> <Field>
<FieldLabel for="supplier-name" required>Nama</FieldLabel> <FieldLabel for="supplier-name" required>Nama</FieldLabel>
<Input id="supplier-name" v-model="form.name" type="text" placeholder="Nama supplier" <Input id="supplier-name" v-model="form.name" type="text" placeholder="Contoh: PT Sumber Makmur"
autofocus :maxlength="FIELD_LIMITS.name" /> autofocus :maxlength="FIELD_LIMITS.name" />
<FieldError :errors="formErrors(form, 'name')" /> <FieldError :errors="formErrors(form, 'name')" />
</Field> </Field>
<Field> <Field>
<FieldLabel for="supplier-phone-number">Nomor Telepon</FieldLabel> <FieldLabel for="supplier-phone-number">Nomor Telepon</FieldLabel>
<PhoneNumberInput id="supplier-phone-number" v-model="form.phone_number" <PhoneNumberInput id="supplier-phone-number" v-model="form.phone_number"
placeholder="Nomor telepon supplier" /> placeholder="Contoh: 08123456789" />
<FieldError :errors="formErrors(form, 'phone_number')" /> <FieldError :errors="formErrors(form, 'phone_number')" />
</Field> </Field>
<Field> <Field>
<FieldLabel for="supplier-address">Alamat</FieldLabel> <FieldLabel for="supplier-address">Alamat</FieldLabel>
<Textarea id="supplier-address" v-model="form.address" rows="3" <Textarea id="supplier-address" v-model="form.address" rows="3"
placeholder="Alamat supplier" /> placeholder="Contoh: Jl. Merdeka No. 45, Bandung" />
<FieldError :errors="formErrors(form, 'address')" /> <FieldError :errors="formErrors(form, 'address')" />
</Field> </Field>
</FieldSet> </FieldSet>

8
resources/js/pages/admin/account/Profile.vue
View File

@ -66,7 +66,7 @@ function submit() {
Email Email
</FieldLabel> </FieldLabel>
<Input id="email" v-model="form.email" type="email" <Input id="email" v-model="form.email" type="email"
placeholder="nama@perusahaan.com" :maxlength="FIELD_LIMITS.email" /> placeholder="Contoh: nama@perusahaan.com" :maxlength="FIELD_LIMITS.email" />
<FieldError :errors="formErrors(form, 'email')" /> <FieldError :errors="formErrors(form, 'email')" />
</Field> </Field>
@ -74,7 +74,7 @@ function submit() {
<FieldLabel for="username" required> <FieldLabel for="username" required>
Username Username
</FieldLabel> </FieldLabel>
<Input id="username" v-model="form.username" type="text" placeholder="username" <Input id="username" v-model="form.username" type="text" placeholder="Contoh: johndoe"
:maxlength="FIELD_LIMITS.username" /> :maxlength="FIELD_LIMITS.username" />
<FieldError :errors="formErrors(form, 'username')" /> <FieldError :errors="formErrors(form, 'username')" />
</Field> </Field>
@ -84,7 +84,7 @@ function submit() {
Nama Lengkap Nama Lengkap
</FieldLabel> </FieldLabel>
<Input id="full_name" v-model="form.full_name" type="text" <Input id="full_name" v-model="form.full_name" type="text"
placeholder="Nama lengkap" :maxlength="FIELD_LIMITS.fullName" /> placeholder="Contoh: John Doe" :maxlength="FIELD_LIMITS.fullName" />
<FieldError :errors="formErrors(form, 'full_name')" /> <FieldError :errors="formErrors(form, 'full_name')" />
</Field> </Field>
@ -124,7 +124,7 @@ function submit() {
<FieldLabel for="address"> <FieldLabel for="address">
Alamat Alamat
</FieldLabel> </FieldLabel>
<Textarea id="address" v-model="form.address" placeholder="Alamat lengkap" <Textarea id="address" v-model="form.address" placeholder="Contoh: Jl. Sudirman No. 123, Jakarta"
rows="3" /> rows="3" />
<FieldError :errors="formErrors(form, 'address')" /> <FieldError :errors="formErrors(form, 'address')" />
</Field> </Field>