Skip to main content

Field Text

show code
import { Button, Stack } from "@mui/material";
import { NotifyProvider } from "mui-eazy";
import { useFormRef, FieldText, FormProvider, notify } from "mui-eazy";

export default () => {
const formRef = useFormRef({});
const { handleSubmit } = formRef;
const onSubmit = handleSubmit(() => {
notify.success(JSON.stringify(formRef.getValues()));
});
return (
<NotifyProvider>
<FormProvider formRef={formRef} onSubmit={onSubmit}>
<FieldText name="test" label="Field Text" />
<Stack
direction="row"
sx={{
justifyContent: "end",
}}>
<Button
sx={{
marginTop: "10px",
}}
variant="contained"
type="submit">
{" "}
Submit
</Button>
</Stack>
</FormProvider>
</NotifyProvider>
);
};

Props​

tip
  • Type: any, can be customized as needed.
  • Default value:
    • Not specified: optional.
    • Specified as "require": mandatory.
  • Type link: Click to navigate to the details below.

Type​

nametypedefaultValuedesc
namestringform item name
labelnumberform item label
defaultValueanyThe default value. Use when the component is not controlled.
valueanyThe value of the input element, required for a controlled component.
typestringType of the input element. It should be a valid HTML5 input type.
requiredbooleanfalseIf true, the label is displayed as required and the input element is required.