125k

Checkbox

PreviousNext

ユーザーがチェック済みとチェックなしを切り替えることができるコントロール。

BaseRadixReact Aria

このチェックボックスをクリックすると、規約に同意したことになります。

"use client"

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

インストール

pnpm dlx shadcn@latest add 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/radix/checkbox"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/radix/field"

基本

適切なレイアウトとラベル付けを行うには、チェックボックスを Field および FieldLabel と組み合わせます。

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

説明

ヘルパー テキストには FieldContent と FieldDescription を使用します。

このチェックボックスをクリックすると、利用規約に同意したことになります。

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

無効

disabled プロパティを使用して相互作用を防止し、無効なスタイルの <Field> コンポーネントに data-disabled 属性を追加します。

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

グループ

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

デスクトップに表示する項目:

デスクトップに表示したい項目を選択してください。

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

テーブル

名前メールアドレス役割
Sarah Chensarah.chen@example.com管理者
Marcus Rodriguezmarcus.rodriguez@example.comユーザー
Priya Patelpriya.patel@example.comユーザー
David Kimdavid.kim@example.com編集者
"use client"

import * as React from "react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

بالنقر على هذا المربع، فإنك توافق على الشروط.

"use client"

import * as React from "react"

API リファレンス

詳細については、Radix UI ドキュメントを参照してください。