Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 4x 14x 14x 4x | import React from "react";
import {
styled,
Box,
FormControlLabel as MuiFormControlLabel,
FormControlLabelProps as MuiFormControlLabelProps,
} from "@mui/material";
import { Text } from "@common/Text";
import { palette } from "@palette";
// FormControlLabel
export type FormControlLabelProps = MuiFormControlLabelProps & {
size?: "small" | "medium";
helperText?: React.ReactNode;
};
export const FormControlLabel: React.FC<FormControlLabelProps> = ({
size = "medium",
label,
helperText,
...rest
}) => {
const LabelComponent = (
<Box>
{typeof label === "string" ? (
<Text variant={size === "small" ? "body" : "headline"}>{label}</Text>
) : (
label
)}
{helperText && (
<Text
variant={size === "small" ? "caption" : "body"}
color={palette.neutral[500]}
>
{helperText}
</Text>
)}
</Box>
);
return <Label {...rest} label={LabelComponent} />;
};
const Label = styled(MuiFormControlLabel)({
alignItems: "flex-start !important",
marginLeft: 0,
});
|