@nish1896/rhf-mui-components/common/FormLabel.js

A suite of 20+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.

import { RHFMuiConfigContext } from "../config/ConfigProvider.js";
import { Fragment, useContext } from "react";
import { jsx } from "react/jsx-runtime";
import MuiFormLabel from "@mui/material/FormLabel";
import { styled } from "@mui/material/styles";
//#region src/common/FormLabel.tsx
/**
* When label was a typography component, the asterisk was
* rendering in a new line, the "StyledFormLabel" component
* addresses this issue.
*/
const StyledFormLabel = styled(MuiFormLabel)(() => ({
	display: "flex",
	flexDirection: "row"
}));
const FormLabel = ({ label, isVisible, required, error, formLabelProps }) => {
	const { defaultFormLabelSx } = useContext(RHFMuiConfigContext);
	const { sx, ...otherLabelProps } = formLabelProps ?? {};
	const appliedLabelSx = {
		...defaultFormLabelSx,
		...sx
	};
	return /* @__PURE__ */ jsx(Fragment, { children: isVisible && /* @__PURE__ */ jsx(StyledFormLabel, {
		...otherLabelProps,
		required,
		error,
		sx: appliedLabelSx,
		children: label
	}) });
};
//#endregion
export { FormLabel as default };