Skip to content

Instantly share code, notes, and snippets.

@Wellers0n
Created January 4, 2023 18:58
Show Gist options
  • Save Wellers0n/d5dffb1263ae0fed5046e45c47a7c4a7 to your computer and use it in GitHub Desktop.
Save Wellers0n/d5dffb1263ae0fed5046e45c47a7c4a7 to your computer and use it in GitHub Desktop.
MuiltSelect with mui
import { TextField } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import { useFormikContext } from 'formik';
import React from 'react';
type OptionsValues = {
title: string,
value: string
}
type Props = {
id: string,
name: string,
label: string,
options: OptionsValues[]
}
function MuiltSelect(props: Props) {
const { options, name, label, id } = props
const formik = useFormikContext();
return (
<Autocomplete
{...props}
multiple
options={options}
getOptionLabel={(option: any) => option.title}
onChange={(_, value) => formik.setFieldValue(name, value)}
filterSelectedOptions
isOptionEqualToValue={(item: any, current: any) => item.value === current.value}
renderInput={(params) => (
<TextField
{...params}
id={id}
name={name}
label={label}
variant={"outlined"}
onChange={formik.handleChange}
error={formik.touched[name] && Boolean(formik.errors[name])}
helperText={formik.errors[name]}
value={formik.values[name]}
fullWidth
/>
)
}
/>
)
}
export default MuiltSelect
@mm0hammadi
Copy link

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment