Spaces:
Sleeping
Sleeping
File size: 4,324 Bytes
56fda74 |
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
import { Theme } from '../styles';
import { FormControlClasses } from './formControlClasses';
export interface FormControlPropsSizeOverrides {}
export interface FormControlPropsColorOverrides {}
export interface FormControlOwnProps {
/**
* The content of the component.
*/
children?: React.HTMLAttributes<HTMLDivElement>['children'];
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<FormControlClasses>;
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'primary'
*/
color?: OverridableStringUnion<
'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
FormControlPropsColorOverrides
>;
/**
* If `true`, the label, input and helper text should be displayed in a disabled state.
* @default false
*/
disabled?: boolean;
/**
* If `true`, the label is displayed in an error state.
* @default false
*/
error?: boolean;
/**
* If `true`, the component will take up the full width of its container.
* @default false
*/
fullWidth?: boolean;
/**
* If `true`, the component is displayed in focused state.
*/
focused?: boolean;
/**
* If `true`, the label is hidden.
* This is used to increase density for a `FilledInput`.
* Be sure to add `aria-label` to the `input` element.
* @default false
*/
hiddenLabel?: boolean;
/**
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
* @default 'none'
*/
margin?: 'dense' | 'normal' | 'none';
/**
* If `true`, the label will indicate that the `input` is required.
* @default false
*/
required?: boolean;
/**
* The size of the component.
* @default 'medium'
*/
size?: OverridableStringUnion<'small' | 'medium', FormControlPropsSizeOverrides>;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
/**
* The variant to use.
* @default 'outlined'
*/
variant?: 'standard' | 'outlined' | 'filled';
}
export interface FormControlTypeMap<
AdditionalProps = {},
RootComponent extends React.ElementType = 'div',
> {
props: AdditionalProps & FormControlOwnProps;
defaultComponent: RootComponent;
}
/**
* Provides context such as filled/focused/error/required for form inputs.
* Relying on the context provides high flexibility and ensures that the state always stays
* consistent across the children of the `FormControl`.
* This context is used by the following components:
*
* * FormLabel
* * FormHelperText
* * Input
* * InputLabel
*
* You can find one composition example below and more going to [the demos](https://mui.com/material-ui/react-text-field/#components).
*
* ```jsx
* <FormControl>
* <InputLabel htmlFor="my-input">Email address</InputLabel>
* <Input id="my-input" aria-describedby="my-helper-text" />
* <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
* </FormControl>
* ```
*
* ⚠️ Only one `InputBase` can be used within a FormControl because it creates visual inconsistencies.
* For instance, only one input can be focused at the same time, the state shouldn't be shared.
*
* 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/)
* - [Text Field](https://mui.com/material-ui/react-text-field/)
*
* API:
*
* - [FormControl API](https://mui.com/material-ui/api/form-control/)
*/
declare const FormControl: OverridableComponent<FormControlTypeMap>;
export type FormControlProps<
RootComponent extends React.ElementType = FormControlTypeMap['defaultComponent'],
AdditionalProps = {},
> = OverrideProps<FormControlTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
component?: React.ElementType;
};
export default FormControl;
|