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

A suite of 20+ reusable Material UI components for React Hook Form to minimize your time and effort in creating and styling forms

import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment, useContext } from 'react';
import MuiFormLabel from '@mui/material/FormLabel';
import { styled } from '@mui/material/styles';
import { RHFMuiConfigContext } from '../../config/ConfigProvider';
/**
 * 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 (_jsx(Fragment, { children: isVisible && (_jsx(StyledFormLabel, { ...otherLabelProps, required: required, error: error, sx: appliedLabelSx, children: label })) }));
};
export default FormLabel;