コンテンツへスキップ
1.6k

チェックボックス

同意チェックボックスのオン／オフ切り替え、複数選択フィルター、および行の一括選択機能――ネオブルータリズム風の枠線と影の演出が施されています。

"use client"

import { Checkbox } from "@/components/ui/checkbox"

Checkbox は二値選択の標準コントロールです。チェック済み、未チェック、部分選択の不定（indeterminate）に対応します。Base UI Checkbox プリミティブ上に構築し、ネオブルータリストのレシピに沿ってスタイルしています。太い枠線、硬い影、太字のタイポグラフィです。

次のような場面で使います：

  • 規約と同意 — サインアップやチェックアウトの「同意する」ボックス。フォームと一緒に送信します。
  • 複数選択フィルター — サイドバーのカテゴリ、タグ、価格帯など、任意の組み合わせが有効な場面。
  • テーブルの一括選択 — 行ごとのチェックボックスと、ヘッダーの不定状態の全選択。

インストール

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
npx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/checkbox.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/checkbox.json

以下の依存関係をインストールします。

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

以下のコードをコピーして、プロジェクトに貼り付けます。

components/ui/checkbox.tsx
"use client"

import * as React from "react"
import { CheckIcon } from "lucide-react"
import { Checkbox as CheckboxPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative flex size-5 shrink-0 items-center justify-center rounded border-2 bg-input shadow-sm transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-checked:border-border data-checked:bg-primary data-checked:text-primary-foreground",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
      >
        <CheckIcon />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  )
}

export { Checkbox }

インポートのパスをプロジェクトの構成に合わせて更新します。

使い方

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />

チェック状態

非制御のチェックボックスには defaultChecked を使用し、状態を制御する場合は checked と onCheckedChange を使用します。

import * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

不正な状態

不正な状態のスタイルを表示するには、チェックボックスに aria-invalid を、フィールドのラッパーに data-invalid を 設定します。

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

使用例

基本

適切なレイアウトとラベル付けのために、チェックボックスを Field および FieldLabel と組み合わせて使用します。

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

説明

補助テキストには FieldContent と FieldDescription を使用します。

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

無効

操作を無効にするには disabled プロパティを使用し、無効時のスタイルを適用するには <Field> コンポーネントに data-disabled 属性を追加します。

import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"

グループ

複数のフィールドを使用して、チェックボックスのリストを作成します。

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,

テーブル

"use client"

import * as React from "react"

RTL

Neobrutalism で RTL を有効にする方法は、RTL 設定ガイドをご覧ください。

"use client"

import * as React from "react"

アクセシビリティ

Checkbox は WAI-ARIA Checkbox パターン に従います。プリミティブは aria-checked（不定状態では "mixed" を含む）付きの role="checkbox" 要素を描画し、非表示のネイティブ input と同期してフォーム送信に載せます。

キーボード操作：

キー操作
Tab / Shift + Tabチェックボックスへ／からフォーカスを移動
Spaceチェック状態を切り替え（不定 → チェック済み）

Enter ではチェックボックスは切り替わりません。ARIA パターンどおりであり、不具合ではありません。

APIリファレンス

詳しくは Base UI のドキュメントをご覧ください。