Field Select

show code

componennt

import { Button, Stack } from "@mui/material";
import PropsTable from "@site/src/components/PropsTable";
import { NotifyProvider } from "mui-eazy";
import {
  useFormRef,
  FieldDatePicker,
  FormProvider,
  notify,
  LocalizationProvider,
} from "mui-eazy";

export const FieldSelectDemo = () => {
  const formRef = useFormRef({});
  const { handleSubmit } = formRef;
  const onSubmit = handleSubmit(() => {
    notify.success(JSON.stringify(formRef.getValues()));
  });
  const options = ["1", "2"];
  return (
    <FormProvider formRef={formRef} onSubmit={onSubmit}>
      <FieldSelect name="FieldMul">
        {options?.map((item: any) => {
          return (
            <MenuItem
              key={typeof item == "string" ? item : item.key}
              value={typeof item == "string" ? item : item.value}>
              {typeof item == "string" ? item : item.label}
            </MenuItem>
          );
        })}
      </FieldSelect>
      <Stack
        direction="row"
        sx={{
          justifyContent: "end",
        }}>
        <Button
          sx={{
            marginTop: "10px",
          }}
          variant="contained"
          type="submit">
          Submit
        </Button>
      </Stack>
    </FormProvider>
  );
};

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

name	type	defaultValue	desc
name	string		form item name
label	number		form item label
defaultValue	any		The default value. Use when the component is not controlled.
value	any		The value of the input element, required for a controlled component.
type	string		Type of the input element. It should be a valid HTML5 input type.
required	boolean	false	If true, the label is displayed as required and the input element is required.