セレクトフィールドは、あらかじめ管理画面で定義した選択肢の中から、任意の値を一つ、または複数選択して入力するためのフィールドです。
商品のサイズ展開（S/M/L）や都道府県など、決まった選択肢の中からデータを分類・属性付けしたい場合に適しています。

データの入稿方法

単一選択の場合（複数選択がOFF）

スキーマ設定で「複数選択」をOFFにしている場合、プルダウン（ドロップダウン）形式で表示されます。

• フィールドをクリックすると、定義済みの選択肢がリストで表示されます。
• リストの中から、該当する項目を一つ選択します。

複数選択の場合（複数選択がON）

スキーマ設定で「複数選択」をONにしている場合、チェックボックス形式で表示されます。

• 定義済みの選択肢が一覧で表示されます。
• 該当する項目のチェックボックスをクリックして選択します。

API、CSVを利用した入稿については以下のドキュメントをご参照ください。

制限事項／注意事項

• 設定できる項目数の上限は設けておりません。
• ブログのカテゴリとして利用する場合は、コンテンツ参照フィールドで実装するケースと比較してデメリットがあります。詳細はヘルプ記事「ブログやお知らせに、カテゴリやタグを作成する方法は？」をご参照ください。
• APIレスポンスの配列順は、スキーマでの定義順ではなく、入稿画面で選択した順番となります。

詳細設定

GET APIのレスポンス形式

詳細は以下のドキュメントをご参照ください。

フロントエンドでの利用方法

セレクトフィールドは複数選択の設定に関わらず常に配列として取得されるため、フロントエンドの実装ではループ処理を用いて選択された項目を表示します。
以下はNext.jsの実装例です。

export default async function Page({ params }) {
  const { slug } = await params;

  // microCMS JavaScript SDK（https://github.com/microcmsio/microcms-js-sdk）を使用してデータを取得
  const data = await client.getListDetail({
    endpoint: "blog",
    contentId: slug,
  });

  return (
    <main>
      {/* selectField はフィールドIDです。実際のフィールドIDに置き換えてください */}
      {data.selectField.map((tag, index) => (
        <span key={index}>{tag}</span>
      ))}
    </main>
  );
}