I have a problem with shadcn's <FormLabel>
. How do prevent it from showing a color of red (It actually add a text-destructive
automatically) when a field has error/required.
I only want the <FormMessage/>
to change the color.
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel>Project Name</FormLabel>
<FormControl>
<Input placeholder="Enter project name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
You need to make some changes in FormLabel
component ( in form.jsx
file ) that was build by shadcn cli
New FormLabel:
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { formItemId } = useFormField()
return (
<Label
ref={ref}
className={className}
htmlFor={formItemId}
{...props}
/>
)
})