vngrup/dress
vngrup/dress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add required indicator support to Label component and apply to mandatory form fields

Browse Source
This commit is contained in:
Yoga Pangestu 2026-04-17 15:43:56 +07:00
parent a4a22e1cc5
commit d169e5a733
12 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/components/ui/label.tsx
View File

@ -5,8 +5,10 @@ import { cn } from "@/lib/utils"
function Label({ function Label({
className, className,
required,
children,
...props ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) { }: React.ComponentProps<typeof LabelPrimitive.Root> & { required?: boolean }) {
return ( return (
<LabelPrimitive.Root <LabelPrimitive.Root
data-slot="label" data-slot="label"
@ -15,7 +17,10 @@ function Label({
className className
)} )}
{...props} {...props}
/> >
{children}
{required && <span className="text-destructive font-bold">*</span>}
</LabelPrimitive.Root>
) )
} }

4
resources/js/pages/admin/finance/expense/index.tsx
View File

@ -280,7 +280,7 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<FieldGroup> <FieldGroup>
<Field> <Field>
<Label htmlFor="name">Nama</Label> <Label htmlFor="name" required>Nama</Label>
<Input <Input
id="name" id="name"
name="name" name="name"
@ -294,7 +294,7 @@ export default function ExpenseIndex({ expenses }: { expenses: Expense[] }) {
</Field> </Field>
<Field> <Field>
<Label htmlFor="amount">Nominal</Label> <Label htmlFor="amount" required>Nominal</Label>
<NumericFormat <NumericFormat
id="amount" id="amount"
customInput={Input} customInput={Input}

2
resources/js/pages/admin/master/category/index.tsx
View File

@ -205,7 +205,7 @@ export default function CategoryIndex({ categories }: { categories: Category[] }
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<FieldGroup> <FieldGroup>
<Field> <Field>
<Label htmlFor="name">Nama</Label> <Label htmlFor="name" required>Nama</Label>
<Input <Input
id="name" id="name"
name="name" name="name"

14
resources/js/pages/admin/master/product/create.tsx
View File

@ -132,7 +132,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <Field>
<Label htmlFor="name">Nama</Label> <Label htmlFor="name" required>Nama</Label>
<Input <Input
id="name" id="name"
name="name" name="name"
@ -146,7 +146,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
</Field> </Field>
<Field> <Field>
<Label htmlFor="category_ids">Kategori</Label> <Label htmlFor="category_ids" required>Kategori</Label>
<Combobox <Combobox
multiple multiple
autoHighlight autoHighlight
@ -205,7 +205,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
<CardContent> <CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Field> <Field>
<Label htmlFor="price_purchase">Harga Beli</Label> <Label htmlFor="price_purchase" required>Harga Beli</Label>
<NumericFormat <NumericFormat
id="price_purchase" id="price_purchase"
customInput={Input} customInput={Input}
@ -226,7 +226,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
</Field> </Field>
<Field> <Field>
<Label htmlFor="price_distributor">Harga Distributor</Label> <Label htmlFor="price_distributor" required>Harga Distributor</Label>
<NumericFormat <NumericFormat
id="price_distributor" id="price_distributor"
customInput={Input} customInput={Input}
@ -247,7 +247,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
</Field> </Field>
<Field> <Field>
<Label htmlFor="price_agent">Harga Agen</Label> <Label htmlFor="price_agent" required>Harga Agen</Label>
<NumericFormat <NumericFormat
id="price_agent" id="price_agent"
customInput={Input} customInput={Input}
@ -268,7 +268,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
</Field> </Field>
<Field> <Field>
<Label htmlFor="price_reseller">Harga Reseller</Label> <Label htmlFor="price_reseller" required>Harga Reseller</Label>
<NumericFormat <NumericFormat
id="price_reseller" id="price_reseller"
customInput={Input} customInput={Input}
@ -289,7 +289,7 @@ export default function ProductCreate({ categories }: { categories: Category[] }
</Field> </Field>
<Field className="md:col-span-2"> <Field className="md:col-span-2">
<Label htmlFor="price_retail">Harga Retail</Label> <Label htmlFor="price_retail" required>Harga Retail</Label>
<NumericFormat <NumericFormat
id="price_retail" id="price_retail"
customInput={Input} customInput={Input}

14
resources/js/pages/admin/master/product/edit.tsx
View File

@ -180,7 +180,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <Field>
<Label htmlFor="name">Nama</Label> <Label htmlFor="name" required>Nama</Label>
<Input <Input
id="name" id="name"
name="name" name="name"
@ -194,7 +194,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
</Field> </Field>
<Field> <Field>
<Label htmlFor="category_ids">Kategori</Label> <Label htmlFor="category_ids" required>Kategori</Label>
<Combobox <Combobox
multiple multiple
autoHighlight autoHighlight
@ -253,7 +253,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
<CardContent> <CardContent>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Field> <Field>
<Label htmlFor="price_purchase">Harga Beli</Label> <Label htmlFor="price_purchase" required>Harga Beli</Label>
<NumericFormat <NumericFormat
id="price_purchase" id="price_purchase"
customInput={Input} customInput={Input}
@ -274,7 +274,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
</Field> </Field>
<Field> <Field>
<Label htmlFor="price_distributor">Harga Distributor</Label> <Label htmlFor="price_distributor" required>Harga Distributor</Label>
<NumericFormat <NumericFormat
id="price_distributor" id="price_distributor"
customInput={Input} customInput={Input}
@ -295,7 +295,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
</Field> </Field>
<Field> <Field>
<Label htmlFor="price_agent">Harga Agen</Label> <Label htmlFor="price_agent" required>Harga Agen</Label>
<NumericFormat <NumericFormat
id="price_agent" id="price_agent"
customInput={Input} customInput={Input}
@ -316,7 +316,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
</Field> </Field>
<Field> <Field>
<Label htmlFor="price_reseller">Harga Reseller</Label> <Label htmlFor="price_reseller" required>Harga Reseller</Label>
<NumericFormat <NumericFormat
id="price_reseller" id="price_reseller"
customInput={Input} customInput={Input}
@ -337,7 +337,7 @@ export default function ProductEdit({ product, categories }: { product: Product,
</Field> </Field>
<Field className="md:col-span-2"> <Field className="md:col-span-2">
<Label htmlFor="price_retail">Harga Retail</Label> <Label htmlFor="price_retail" required>Harga Retail</Label>
<NumericFormat <NumericFormat
id="price_retail" id="price_retail"
customInput={Input} customInput={Input}

16
resources/js/pages/admin/master/user/create.tsx
View File

@ -63,7 +63,7 @@ export default function UserCreate() {
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <Field>
<Label htmlFor="full_name">Nama Lengkap</Label> <Label htmlFor="full_name" required>Nama Lengkap</Label>
<Input <Input
id="full_name" id="full_name"
name="full_name" name="full_name"
@ -77,7 +77,7 @@ export default function UserCreate() {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Field> <Field>
<Label htmlFor="nik">NIK</Label> <Label htmlFor="nik" required>NIK</Label>
<Input <Input
id="nik" id="nik"
name="nik" name="nik"
@ -91,7 +91,7 @@ export default function UserCreate() {
</Field> </Field>
<Field> <Field>
<Label htmlFor="phone_number">Nomor Telepon</Label> <Label htmlFor="phone_number" required>Nomor Telepon</Label>
<Input <Input
id="phone_number" id="phone_number"
name="phone_number" name="phone_number"
@ -104,7 +104,7 @@ export default function UserCreate() {
</Field> </Field>
<Field> <Field>
<Label htmlFor="birth_place">Tempat Lahir</Label> <Label htmlFor="birth_place" required>Tempat Lahir</Label>
<Input <Input
id="birth_place" id="birth_place"
name="birth_place" name="birth_place"
@ -117,7 +117,7 @@ export default function UserCreate() {
</Field> </Field>
<Field> <Field>
<Label htmlFor="birth_date">Tanggal Lahir</Label> <Label htmlFor="birth_date" required>Tanggal Lahir</Label>
<Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}> <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
@ -158,7 +158,7 @@ export default function UserCreate() {
</div> </div>
<Field> <Field>
<Label htmlFor="address">Alamat</Label> <Label htmlFor="address" required>Alamat</Label>
<Textarea id='address' name='address' value={data.address} onChange={e => setData('address', e.target.value)} placeholder='Contoh: Kp. Bakan Sampeu' /> <Textarea id='address' name='address' value={data.address} onChange={e => setData('address', e.target.value)} placeholder='Contoh: Kp. Bakan Sampeu' />
{errors.address && <p className="text-xs text-red-500">{errors.address}</p>} {errors.address && <p className="text-xs text-red-500">{errors.address}</p>}
</Field> </Field>
@ -173,7 +173,7 @@ export default function UserCreate() {
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <Field>
<Label htmlFor="email">Alamat Surel</Label> <Label htmlFor="email" required>Alamat Surel</Label>
<Input <Input
id="email" id="email"
name="email" name="email"
@ -187,7 +187,7 @@ export default function UserCreate() {
</Field> </Field>
<Field> <Field>
<Label htmlFor="username">Nama Pengguna</Label> <Label htmlFor="username" required>Nama Pengguna</Label>
<Input <Input
id="username" id="username"
name="username" name="username"

16
resources/js/pages/admin/master/user/edit.tsx
View File

@ -64,7 +64,7 @@ export default function UserEdit({ user }: { user: any }) {
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <Field>
<Label htmlFor="full_name">Nama Lengkap</Label> <Label htmlFor="full_name" required>Nama Lengkap</Label>
<Input <Input
id="full_name" id="full_name"
name="full_name" name="full_name"
@ -78,7 +78,7 @@ export default function UserEdit({ user }: { user: any }) {
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Field> <Field>
<Label htmlFor="nik">NIK</Label> <Label htmlFor="nik" required>NIK</Label>
<Input <Input
id="nik" id="nik"
name="nik" name="nik"
@ -92,7 +92,7 @@ export default function UserEdit({ user }: { user: any }) {
</Field> </Field>
<Field> <Field>
<Label htmlFor="phone_number">Nomor Telepon</Label> <Label htmlFor="phone_number" required>Nomor Telepon</Label>
<Input <Input
id="phone_number" id="phone_number"
name="phone_number" name="phone_number"
@ -105,7 +105,7 @@ export default function UserEdit({ user }: { user: any }) {
</Field> </Field>
<Field> <Field>
<Label htmlFor="birth_place">Tempat Lahir</Label> <Label htmlFor="birth_place" required>Tempat Lahir</Label>
<Input <Input
id="birth_place" id="birth_place"
name="birth_place" name="birth_place"
@ -118,7 +118,7 @@ export default function UserEdit({ user }: { user: any }) {
</Field> </Field>
<Field> <Field>
<Label htmlFor="birth_date">Tanggal Lahir</Label> <Label htmlFor="birth_date" required>Tanggal Lahir</Label>
<Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}> <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
@ -159,7 +159,7 @@ export default function UserEdit({ user }: { user: any }) {
</div> </div>
<Field> <Field>
<Label htmlFor="address">Alamat</Label> <Label htmlFor="address" required>Alamat</Label>
<Textarea id='address' name='address' value={data.address} onChange={e => setData('address', e.target.value)} placeholder='Contoh: Kp. Bakan Sampeu' /> <Textarea id='address' name='address' value={data.address} onChange={e => setData('address', e.target.value)} placeholder='Contoh: Kp. Bakan Sampeu' />
{errors.address && <p className="text-xs text-red-500">{errors.address}</p>} {errors.address && <p className="text-xs text-red-500">{errors.address}</p>}
</Field> </Field>
@ -174,7 +174,7 @@ export default function UserEdit({ user }: { user: any }) {
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent className="space-y-6">
<Field> <Field>
<Label htmlFor="email">Alamat Surel</Label> <Label htmlFor="email" required>Alamat Surel</Label>
<Input <Input
id="email" id="email"
name="email" name="email"
@ -188,7 +188,7 @@ export default function UserEdit({ user }: { user: any }) {
</Field> </Field>
<Field> <Field>
<Label htmlFor="username">Nama Pengguna</Label> <Label htmlFor="username" required>Nama Pengguna</Label>
<Input <Input
id="username" id="username"
name="username" name="username"

2
resources/js/pages/auth/forgot-password.tsx
View File

@ -25,7 +25,7 @@ export default function ForgotPassword({ status }: { status?: string }) {
{({ processing, errors }) => ( {({ processing, errors }) => (
<> <>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="email">Email address</Label> <Label htmlFor="email" required>Email address</Label>
<Input <Input
id="email" id="email"
type="email" type="email"

4
resources/js/pages/auth/login.tsx
View File

@ -28,7 +28,7 @@ export default function Login({
<> <>
<div className="grid gap-6"> <div className="grid gap-6">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="email">Alamat Surel</Label> <Label htmlFor="email" required>Alamat Surel</Label>
<Input <Input
id="email" id="email"
type="email" type="email"
@ -44,7 +44,7 @@ export default function Login({
<div className="grid gap-2"> <div className="grid gap-2">
<div className="flex items-center"> <div className="flex items-center">
<Label htmlFor="password">Kata Sandi</Label> <Label htmlFor="password" required>Kata Sandi</Label>
</div> </div>
<PasswordInput <PasswordInput
id="password" id="password"

8
resources/js/pages/auth/register.tsx
View File

@ -23,7 +23,7 @@ export default function Register() {
<> <>
<div className="grid gap-6"> <div className="grid gap-6">
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="name">Name</Label> <Label htmlFor="name" required>Name</Label>
<Input <Input
id="name" id="name"
type="text" type="text"
@ -41,7 +41,7 @@ export default function Register() {
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="email">Email address</Label> <Label htmlFor="email" required>Email address</Label>
<Input <Input
id="email" id="email"
type="email" type="email"
@ -55,7 +55,7 @@ export default function Register() {
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="password">Password</Label> <Label htmlFor="password" required>Password</Label>
<PasswordInput <PasswordInput
id="password" id="password"
required required
@ -68,7 +68,7 @@ export default function Register() {
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="password_confirmation"> <Label htmlFor="password_confirmation" required>
Confirm password Confirm password
</Label> </Label>
<PasswordInput <PasswordInput

4
resources/js/pages/settings/profile.tsx
View File

@ -41,7 +41,7 @@ export default function Profile({
{({ processing, errors }) => ( {({ processing, errors }) => (
<> <>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="name">Name</Label> <Label htmlFor="name" required>Name</Label>
<Input <Input
id="name" id="name"
@ -60,7 +60,7 @@ export default function Profile({
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="email">Email address</Label> <Label htmlFor="email" required>Email address</Label>
<Input <Input
id="email" id="email"

6
resources/js/pages/settings/security.tsx
View File

@ -87,7 +87,7 @@ export default function Security({
{({ errors, processing }) => ( {({ errors, processing }) => (
<> <>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="current_password"> <Label htmlFor="current_password" required>
Current password Current password
</Label> </Label>
@ -104,7 +104,7 @@ export default function Security({
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="password">New password</Label> <Label htmlFor="password" required>New password</Label>
<PasswordInput <PasswordInput
id="password" id="password"
@ -119,7 +119,7 @@ export default function Security({
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<Label htmlFor="password_confirmation"> <Label htmlFor="password_confirmation" required>
Confirm password Confirm password
</Label> </Label>