アイコンの入った選択肢を持つselectを作成したい（アクセシビリティを考慮して）

Koji Kobayashi

optionには画像などを含むことができません。

Koji Kobayashi

font iconであればできそう

ですが、単純に画像を入れられた方が使い勝手が良さそう。

Koji Kobayashi

MUIのSelectでもできますね。

import { Select, MenuItem } from "@mui/material";
import { FaAccessibleIcon } from "react-icons/fa";

export default function App() {
  return (
    <div className="App">
      <Select>
        <MenuItem>
          <FaAccessibleIcon />
          test
        </MenuItem>
      </Select>
    </div>
  );
}

Koji Kobayashi

MUIそのまま使えれば良いですが、カスタマイズしようとすると途端にハードルが高い。（と本人は感じているが、自作するハードルの方が高いです。）
なので、アクセシビリティの勉強も兼ねて自作してみようと。