import * as React from 'react';
import { Avatar, Box, MenuItem, Select, } from '@mui/material';
export default function SelectAvatar() {
    const [value, setValue] = React.useState('kyle');
    const handleChange = (event) => {
        setValue(event.target.value);
    };
    return (<Select value={value} onChange={handleChange} sx={{
            display: 'flex',
            alignItems: 'center',
        }}>
      <MenuItem value='kyle'>
        <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
          <Avatar src='https://github.com/gillkyle.png?size=100' sx={{
            height: 24,
            width: 24,
        }}/>
          Kyle Gill
        </Box>
      </MenuItem>
      <MenuItem value='petra'>
        <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
          <Avatar src='https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=100' sx={{
            height: 24,
            width: 24,
        }}/>
          Petra Haan
        </Box>
      </MenuItem>
      <MenuItem value='otto'>
        <Box sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
        }}>
          <Avatar src='https://images.unsplash.com/photo-1597009468351-d9a2749a84fc?w=100' sx={{
            height: 24,
            width: 24,
        }}/>
          Otto von Ahn
        </Box>
      </MenuItem>
    </Select>);
}


import * as React from 'react';
import {
  Avatar,
  Box,
  MenuItem,
  Select,
  SelectChangeEvent,
} from '@mui/material';

export default function SelectAvatar() {
  const [value, setValue] = React.useState('kyle');
  const handleChange = (event: SelectChangeEvent) => {
    setValue(event.target.value);
  };
  return (
    <Select
      value={value}
      onChange={handleChange}
      sx={{
        display: 'flex',
        alignItems: 'center',
      }}
    >
      <MenuItem value='kyle'>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <Avatar
            src='https://github.com/gillkyle.png?size=100'
            sx={{
              height: 24,
              width: 24,
            }}
          />
          Kyle Gill
        </Box>
      </MenuItem>
      <MenuItem value='petra'>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <Avatar
            src='https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=100'
            sx={{
              height: 24,
              width: 24,
            }}
          />
          Petra Haan
        </Box>
      </MenuItem>
      <MenuItem value='otto'>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <Avatar
            src='https://images.unsplash.com/photo-1597009468351-d9a2749a84fc?w=100'
            sx={{
              height: 24,
              width: 24,
            }}
          />
          Otto von Ahn
        </Box>
      </MenuItem>
    </Select>
  );
}


import * as React from 'react';
import { Select } from '@mui/material';
export default function SelectNative() {
    return (<Select native>
      <option value='kyle'>Kyle Gill</option>
      <option value='petra'>Petra Haan</option>
      <option value='otto'>Otto von Ahn</option>
    </Select>);
}


import * as React from 'react';
import { Select } from '@mui/material';

export default function SelectNative() {
  return (
    <Select native>
      <option value='kyle'>Kyle Gill</option>
      <option value='petra'>Petra Haan</option>
      <option value='otto'>Otto von Ahn</option>
    </Select>
  );
}


import { FormControl, FormLabel } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function ComboboxBasic() {
    return (<FormControl>
      <FormLabel>Event name</FormLabel>
      <Autocomplete disablePortal options={dummyEvents} sx={{ width: 300 }} renderInput={params => <TextField variant='filled' {...params}/>} 
    // @ts-ignore getOptionLabel gets confused by the `multiple` prop
    getOptionLabel={option => option.title}/>
    </FormControl>);
}
const dummyEvents = [
    {
        id: 1,
        title: 'Tech Conference 2024',
        description: 'A conference about the latest in technology.',
        date: '2024-09-15',
        location: 'San Francisco, CA',
        attendees: ['Alice', 'Bob', 'Charlie'],
    },
    {
        id: 2,
        title: 'Music Festival',
        description: 'A fun-filled day with live music and food.',
        date: '2024-08-20',
        location: 'Los Angeles, CA',
        attendees: ['Dave', 'Eve', 'Frank'],
    },
    {
        id: 3,
        title: 'Art Exhibition',
        description: 'An exhibition showcasing modern art.',
        date: '2024-10-05',
        location: 'New York, NY',
        attendees: ['Grace', 'Heidi', 'Ivan'],
    },
    {
        id: 4,
        title: 'Startup Pitch Night',
        description: 'Pitch your startup idea to potential investors.',
        date: '2024-11-12',
        location: 'Austin, TX',
        attendees: ['Jack', 'Kathy', 'Leo'],
    },
    {
        id: 5,
        title: 'Cooking Workshop',
        description: 'Learn to cook delicious meals with a professional chef.',
        date: '2024-07-30',
        location: 'Chicago, IL',
        attendees: ['Mallory', 'Nate', 'Oscar'],
    },
];


import { FormControl, FormLabel } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function ComboboxBasic() {
  return (
    <FormControl>
      <FormLabel>Event name</FormLabel>
      <Autocomplete
        disablePortal
        options={dummyEvents}
        sx={{ width: 300 }}
        renderInput={params => <TextField variant='filled' {...params} />}
        // @ts-ignore getOptionLabel gets confused by the `multiple` prop
        getOptionLabel={option => option.title}
      />
    </FormControl>
  );
}

const dummyEvents = [
  {
    id: 1,
    title: 'Tech Conference 2024',
    description: 'A conference about the latest in technology.',
    date: '2024-09-15',
    location: 'San Francisco, CA',
    attendees: ['Alice', 'Bob', 'Charlie'],
  },
  {
    id: 2,
    title: 'Music Festival',
    description: 'A fun-filled day with live music and food.',
    date: '2024-08-20',
    location: 'Los Angeles, CA',
    attendees: ['Dave', 'Eve', 'Frank'],
  },
  {
    id: 3,
    title: 'Art Exhibition',
    description: 'An exhibition showcasing modern art.',
    date: '2024-10-05',
    location: 'New York, NY',
    attendees: ['Grace', 'Heidi', 'Ivan'],
  },
  {
    id: 4,
    title: 'Startup Pitch Night',
    description: 'Pitch your startup idea to potential investors.',
    date: '2024-11-12',
    location: 'Austin, TX',
    attendees: ['Jack', 'Kathy', 'Leo'],
  },
  {
    id: 5,
    title: 'Cooking Workshop',
    description: 'Learn to cook delicious meals with a professional chef.',
    date: '2024-07-30',
    location: 'Chicago, IL',
    attendees: ['Mallory', 'Nate', 'Oscar'],
  },
] as const;


import { FormControl, FormLabel } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function ComboboxMulti() {
    return (<FormControl>
      <FormLabel>Event names</FormLabel>
      <Autocomplete multiple={true} disablePortal options={dummyEvents} renderInput={params => (<TextField variant='filled' sx={{
                '.MuiInputBase-root': {
                    flexWrap: 'nowrap',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    paddingRight: 16,
                },
            }} {...params}/>)} 
    // @ts-ignore getOptionLabel gets confused by the `multiple` prop
    getOptionLabel={option => option.title} disableCloseOnSelect renderTags={value => value.map(opt => opt.title).join(', ')} sx={{
            width: 450,
        }}/>
    </FormControl>);
}
const dummyEvents = [
    {
        id: 1,
        title: 'Tech Conference 2024',
        description: 'A conference about the latest in technology.',
        date: '2024-09-15',
        location: 'San Francisco, CA',
        attendees: ['Alice', 'Bob', 'Charlie'],
    },
    {
        id: 2,
        title: 'Music Festival',
        description: 'A fun-filled day with live music and food.',
        date: '2024-08-20',
        location: 'Los Angeles, CA',
        attendees: ['Dave', 'Eve', 'Frank'],
    },
    {
        id: 3,
        title: 'Art Exhibition',
        description: 'An exhibition showcasing modern art.',
        date: '2024-10-05',
        location: 'New York, NY',
        attendees: ['Grace', 'Heidi', 'Ivan'],
    },
    {
        id: 4,
        title: 'Startup Pitch Night',
        description: 'Pitch your startup idea to potential investors.',
        date: '2024-11-12',
        location: 'Austin, TX',
        attendees: ['Jack', 'Kathy', 'Leo'],
    },
    {
        id: 5,
        title: 'Cooking Workshop',
        description: 'Learn to cook delicious meals with a professional chef.',
        date: '2024-07-30',
        location: 'Chicago, IL',
        attendees: ['Mallory', 'Nate', 'Oscar'],
    },
];


import { FormControl, FormLabel } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function ComboboxMulti() {
  return (
    <FormControl>
      <FormLabel>Event names</FormLabel>
      <Autocomplete
        multiple={true}
        disablePortal
        options={dummyEvents}
        renderInput={params => (
          <TextField
            variant='filled'
            sx={{
              '.MuiInputBase-root': {
                flexWrap: 'nowrap',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                paddingRight: 16,
              },
            }}
            {...params}
          />
        )}
        // @ts-ignore getOptionLabel gets confused by the `multiple` prop
        getOptionLabel={option => option.title}
        disableCloseOnSelect
        renderTags={value => value.map(opt => opt.title).join(', ')}
        sx={{
          width: 450,
        }}
      />
    </FormControl>
  );
}

const dummyEvents = [
  {
    id: 1,
    title: 'Tech Conference 2024',
    description: 'A conference about the latest in technology.',
    date: '2024-09-15',
    location: 'San Francisco, CA',
    attendees: ['Alice', 'Bob', 'Charlie'],
  },
  {
    id: 2,
    title: 'Music Festival',
    description: 'A fun-filled day with live music and food.',
    date: '2024-08-20',
    location: 'Los Angeles, CA',
    attendees: ['Dave', 'Eve', 'Frank'],
  },
  {
    id: 3,
    title: 'Art Exhibition',
    description: 'An exhibition showcasing modern art.',
    date: '2024-10-05',
    location: 'New York, NY',
    attendees: ['Grace', 'Heidi', 'Ivan'],
  },
  {
    id: 4,
    title: 'Startup Pitch Night',
    description: 'Pitch your startup idea to potential investors.',
    date: '2024-11-12',
    location: 'Austin, TX',
    attendees: ['Jack', 'Kathy', 'Leo'],
  },
  {
    id: 5,
    title: 'Cooking Workshop',
    description: 'Learn to cook delicious meals with a professional chef.',
    date: '2024-07-30',
    location: 'Chicago, IL',
    attendees: ['Mallory', 'Nate', 'Oscar'],
  },
] as const;


import { Box, FormControl, FormLabel } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function ComboboxCustom() {
    return (<FormControl>
      <FormLabel>Colors</FormLabel>
      <Autocomplete disablePortal multiple={true} defaultValue={[options[0]]} options={options} renderInput={params => <TextField variant='filled' {...params}/>} renderTags={value => {
            return value.map(opt => (<span key={opt.value} style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: 4,
                    marginRight: 8,
                }}>
              {opt.icon}
              <span>{opt.label}</span>
            </span>));
        }} renderOption={(props, option) => (<li style={{
                display: 'flex',
                alignItems: 'center',
                gap: 10,
            }} {...props}>
            {option.icon}
            <span>{option.label}</span>
          </li>)} sx={{
            width: 300,
        }}/>
    </FormControl>);
}
function ColorDot({ color }) {
    return (<Box sx={{
            width: 12,
            height: 12,
            borderRadius: '50%',
            background: color,
            display: 'inline-block',
            boxShadow: 3,
            border: color === 'white' ? '1px solid #ccc' : '1px solid #fff',
        }}/>);
}
const options = [
    {
        label: 'Red',
        value: 'red',
        icon: <ColorDot color='red'/>,
    },
    {
        label: 'Pink',
        value: 'pink',
        icon: <ColorDot color='pink'/>,
    },
    {
        label: 'Orange',
        value: 'orange',
        icon: <ColorDot color='orange'/>,
    },
    {
        label: 'Yellow',
        value: 'yellow',
        icon: <ColorDot color='yellow'/>,
    },
    {
        label: 'Green',
        value: 'green',
        icon: <ColorDot color='green'/>,
    },
    {
        label: 'Blue',
        value: 'blue',
        icon: <ColorDot color='blue'/>,
    },
    {
        label: 'Indigo',
        value: 'indigo',
        icon: <ColorDot color='indigo'/>,
    },
    {
        label: 'Purple',
        value: 'purple',
        icon: <ColorDot color='purple'/>,
    },
    {
        label: 'Brown',
        value: 'brown',
        icon: <ColorDot color='brown'/>,
    },
    {
        label: 'Black',
        value: 'black',
        icon: <ColorDot color='black'/>,
    },
    {
        label: 'Gray',
        value: 'gray',
        icon: <ColorDot color='gray'/>,
    },
    {
        label: 'White',
        value: 'white',
        icon: <ColorDot color='white'/>,
    },
];


import { Box, FormControl, FormLabel } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function ComboboxCustom() {
  return (
    <FormControl>
      <FormLabel>Colors</FormLabel>
      <Autocomplete
        disablePortal
        multiple={true}
        defaultValue={[options[0]]}
        options={options}
        renderInput={params => <TextField variant='filled' {...params} />}
        renderTags={value => {
          return value.map(opt => (
            <span
              key={opt.value}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 4,
                marginRight: 8,
              }}
            >
              {opt.icon}
              <span>{opt.label}</span>
            </span>
          ));
        }}
        renderOption={(props, option) => (
          <li
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 10,
            }}
            {...props}
          >
            {option.icon}
            <span>{option.label}</span>
          </li>
        )}
        sx={{
          width: 300,
        }}
      />
    </FormControl>
  );
}

function ColorDot({ color }: { color: string }) {
  return (
    <Box
      sx={{
        width: 12,
        height: 12,
        borderRadius: '50%',
        background: color,
        display: 'inline-block',
        boxShadow: 3,
        border: color === 'white' ? '1px solid #ccc' : '1px solid #fff',
      }}
    />
  );
}

const options = [
  {
    label: 'Red',
    value: 'red',
    icon: <ColorDot color='red' />,
  },
  {
    label: 'Pink',
    value: 'pink',
    icon: <ColorDot color='pink' />,
  },
  {
    label: 'Orange',
    value: 'orange',
    icon: <ColorDot color='orange' />,
  },
  {
    label: 'Yellow',
    value: 'yellow',
    icon: <ColorDot color='yellow' />,
  },
  {
    label: 'Green',
    value: 'green',
    icon: <ColorDot color='green' />,
  },
  {
    label: 'Blue',
    value: 'blue',
    icon: <ColorDot color='blue' />,
  },
  {
    label: 'Indigo',
    value: 'indigo',
    icon: <ColorDot color='indigo' />,
  },
  {
    label: 'Purple',
    value: 'purple',
    icon: <ColorDot color='purple' />,
  },
  {
    label: 'Brown',
    value: 'brown',
    icon: <ColorDot color='brown' />,
  },
  {
    label: 'Black',
    value: 'black',
    icon: <ColorDot color='black' />,
  },
  {
    label: 'Gray',
    value: 'gray',
    icon: <ColorDot color='gray' />,
  },
  {
    label: 'White',
    value: 'white',
    icon: <ColorDot color='white' />,
  },
];


Selects & Comboboxes

Select with avatar

Native select

Basic Combobox

Comboxbox Multi

Combobox Custom