Docs
ダッシュボードへ移動

checkbox

複数選択用のチェックボックスグループです。タグ、カテゴリなど、複数の値を選択する場合に使用します。

基本例 

{
  "name": "tags",
  "type": "checkbox",
  "label": "タグ",
  "options": [
    { "value": "javascript", "label": "JavaScript" },
    { "value": "typescript", "label": "TypeScript" },
    { "value": "svelte", "label": "Svelte" }
  ]
}

プロパティ

プロパティ型必須説明
namestringYesフィールドの識別子
type"checkbox"Yes"checkbox"を指定
labelstringNoCMS上での表示名
notestringNo編集者向けの補足メモ
requiredbooleanNo必須フィールドかどうか
optionsarrayYes選択肢の配列
defaultstring[]Noデフォルト値（配列）

optionsの構造

プロパティ型必須説明
valuestringYes選択肢の値（保存される値）
labelstringNo選択肢の表示名（省略時はvalueが表示）

使用例

タグ選択 

{
  "name": "tags",
  "type": "checkbox",
  "label": "タグ",
  "options": [
    { "value": "javascript", "label": "JavaScript" },
    { "value": "typescript", "label": "TypeScript" },
    { "value": "react", "label": "React" },
    { "value": "svelte", "label": "Svelte" }
  ]
}

デフォルト値付き 

{
  "name": "features",
  "type": "checkbox",
  "label": "機能",
  "default": ["basic"],
  "options": [
    { "value": "basic", "label": "基本機能" },
    { "value": "advanced", "label": "高度な機能" },
    { "value": "premium", "label": "プレミアム機能" }
  ]
}

カテゴリ選択 

{
  "name": "categories",
  "type": "checkbox",
  "label": "カテゴリ",
  "required": true,
  "options": [
    { "value": "news", "label": "ニュース" },
    { "value": "tutorial", "label": "チュートリアル" },
    { "value": "review", "label": "レビュー" }
  ],
  "note": "1つ以上選択してください"
}

labelを省略 

{
  "name": "colors",
  "type": "checkbox",
  "label": "色",
  "options": [
    { "value": "red" },
    { "value": "blue" },
    { "value": "green" }
  ]
}

曜日選択 

{
  "name": "days",
  "type": "checkbox",
  "label": "営業日",
  "default": ["mon", "tue", "wed", "thu", "fri"],
  "options": [
    { "value": "mon", "label": "月曜日" },
    { "value": "tue", "label": "火曜日" },
    { "value": "wed", "label": "水曜日" },
    { "value": "thu", "label": "木曜日" },
    { "value": "fri", "label": "金曜日" },
    { "value": "sat", "label": "土曜日" },
    { "value": "sun", "label": "日曜日" }
  ]
}

selectとの違い

フィールドUI適している場面
checkboxチェックボックス選択肢が少ない場合（5個以下）
select (multiple)ドロップダウン選択肢が多い場合
  • checkbox: すべての選択肢が一度に表示される
  • select (multiple): ドロップダウンで選択肢を表示

選択肢が少ない場合はcheckboxの方が視認性が良く、選択肢が多い場合はselectの方がスペースを節約できます。

保存形式

選択された値が配列として保存されます。

マークダウン形式:

---
tags:
  - "javascript"
  - "typescript"
  - "svelte"
---

JSON形式:

{
  "tags": ["javascript", "typescript", "svelte"]
}

何も選択しない場合は空配列になります：

{
  "tags": []
}
Docs