31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import * as UI from "@/ui";
|
|
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
import { t } from "i18next";
|
|
import React from "react";
|
|
import { FormInputProps } from "./FormProps";
|
|
|
|
export interface FormLabelProps {
|
|
label: string;
|
|
hint?: string;
|
|
}
|
|
|
|
export const FormLabel = React.forwardRef<
|
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
|
FormLabelProps &
|
|
Pick<FormInputProps, "required">
|
|
>(({ label, hint, required, ...props }, ref) => {
|
|
const { error } = UI.useFormField();
|
|
|
|
const _hint = hint ? hint : required ? t("common.required") : undefined;
|
|
const _hintClassName = error ? "text-destructive font-semibold" : "";
|
|
return (
|
|
<UI.FormLabel ref={ref} className='flex justify-between text-sm' {...props}>
|
|
<span className={`block font-semibold ${_hintClassName}`}>{label}</span>
|
|
{_hint && <span className={`text-sm font-medium ${_hintClassName} `}>{_hint}</span>}
|
|
</UI.FormLabel>
|
|
);
|
|
});
|
|
|
|
FormLabel.displayName = "FormLabel";
|