Is there a way to know if a field is mandatory from react-hook-form?

[tjhoo]

Hi
I have a component that wrap the shadcn ui form field with react-hook-form like this,

const InputFormItem = ({
  label,
  required = false,
  ...props
}: InputFormItemProps) => (
  <FormField
    {...props}
    render={({ field }) => (
      <FormItem>
        <FormLabel>
          {label}
          {required && <span className="text-destructive"> *</span>}
        </FormLabel>
        <FormControl>
          <Input {...field} />
        </FormControl>
      </FormItem>
    )}
  />
);

Note that I have to add a required attribute in order to render the asterick when it is true.

Is there a better way, for example to retrieve this required from react-hook-form itself than adding a required atttribute?

[chanthinh]

Hi @tjhoo,
Adding a required attribute is the best way to show asterisk in your case

[BorysShulyak]

@tjhoo @chanthinh Here is exactly what you need - https://substack.com/profile/200733325-runespoor-engineering/note/c-66073144

Just put zod schema inside the context over the Form and use this hook inside FormLabel

[ilbertt]

The note you mentioned appears to not be available anymore