import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme, InternalStandardProps as StandardProps } from '..'; import { TypographyProps } from '../Typography'; import { FormControlLabelClasses } from './formControlLabelClasses'; export interface FormControlLabelProps extends StandardProps, 'children' | 'onChange'> { /** * If `true`, the component appears selected. */ checked?: boolean; /** * Override or extend the styles applied to the component. */ classes?: Partial; /** * The props used for each slot inside. * @default {} */ componentsProps?: { /** * Props applied to the Typography wrapper of the passed label. * This is unused if disableTypography is true. * @default {} */ typography?: TypographyProps; }; /** * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`. */ control: React.ReactElement; /** * If `true`, the control is disabled. */ disabled?: boolean; /** * If `true`, the label is rendered as it is passed without an additional typography node. */ disableTypography?: boolean; /** * Pass a ref to the `input` element. */ inputRef?: React.Ref; /** * A text or an element to be used in an enclosing label element. */ label: React.ReactNode; /** * The position of the label. * @default 'end' */ labelPlacement?: 'end' | 'start' | 'top' | 'bottom'; name?: string; /** * Callback fired when the state is changed. * * @param {React.SyntheticEvent} event The event source of the callback. * You can pull out the new checked state by accessing `event.target.checked` (boolean). */ onChange?: (event: React.SyntheticEvent, checked: boolean) => void; /** * If `true`, the label will indicate that the `input` is required. */ required?: boolean; /** * The props used for each slot inside. * @default {} */ slotProps?: { /** * Props applied to the Typography wrapper of the passed label. * This is unused if disableTypography is true. * @default {} */ typography?: TypographyProps; }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; /** * The value of the component. */ value?: unknown; } /** * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component. * Use this component if you want to display an extra label. * * Demos: * * - [Checkbox](https://mui.com/material-ui/react-checkbox/) * - [Radio Group](https://mui.com/material-ui/react-radio-button/) * - [Switch](https://mui.com/material-ui/react-switch/) * * API: * * - [FormControlLabel API](https://mui.com/material-ui/api/form-control-label/) */ export default function FormControlLabel(props: FormControlLabelProps): React.JSX.Element;