# Bits UI デザインシステム

## Bits UI デザインシステムのインターフェースプレビュー

個別のチェックを付け、全体の混在状態を確認し、未完了の進捗を見直してから、ローカルのチェックリストを完了して保存します。

## Bits UI デザインシステム デザインリファレンス

Bits UI 2.19.5とSvelte 5.57.1を使用。Bits UIはヘッドレスです。すべての--app-*カラー、タイポグラフィ、間隔の値は、この例に含まれる明示的かつ独自の設定であり、Bits UI公式のデザイン令牌ではありません。ネイティブのデータ属性とコンポーネントのpropsは、それぞれ分けて示しています。

### 独自に設定したCSSのセマンティックカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --app-canvas | #f4f3f8 | ページの背景。 |
| --app-surface | #ffffff | パネルとダイアログの背景。 |
| --app-ink | #2d2938 | 本文テキスト。 |
| --app-muted | #746d80 | 補助テキスト。 |
| --app-line | #e3dfeb | 区切り線と境界線。 |
| --app-action | #604c88 | チェック済みのコントロールと主要なアクション。 |
| --app-on-action | #fff | アクション上のテキスト。 |
| --app-focus | #9a80ce | キーボードフォーカスの表示。 |
| --app-soft | #eee8f7 | 任意の控えめな背景。 |
### 独自の間隔と形状

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --app-space-1 | 4px | 名前付き間隔の最小単位。 |
| --app-space-2 | 8px | 狭い間隔。 |
| --app-space-3 | 12px | コントロールとラベルの間隔。 |
| --app-space-4 | 16px | パネル内側の狭い余白。 |
| --app-space-6 | 24px | デスクトップでのパネル内側の余白とカラム間隔。 |
| --app-space-8 | 32px | デスクトップでのページ内側の余白。 |
| Checkbox geometry | 22×22px; 5px radius; 1px border | 独自に設定したコントロールのスタイル。 |
| Focus ring | 3px solid #9a80ce; 3px offset | キーボード操作時に表示されるボタンのフォーカスに適用。 |
| Dialog width | min(440px, 100% − 28px) | 独自に設定したレスポンシブなオーバーレイの形状。 |
| Dialog maximum height | 100vh − 28px with overflow:auto | オーバーレイ内に限ったビューポートの高さ制限。ページの高さには影響しません。 |
| Type hierarchy | 34px title / 29px mobile; 16px accordion; 13px checks; 12px guidance | 独自に設定したシステムフォントの階層。 |
### ネイティブコンポーネントの仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Checkbox.Root checked | boolean | 完了または未完了の状態。 |
| Checkbox.Root indeterminate | boolean | 一部の項目にチェックが付いていると、一括操作のコントロールは混在状態を示します。 |
| Checkbox data-state | checked / unchecked / indeterminate | スタイルシートで直接使用。 |
| Accordion.Root type | multiple | 複数のレビュ​​ーセクションを同時に開いたままにできます。 |
| Accordion value | string[] | 展開中のグループIDを保持するSvelteバインド配列。 |
| Dialog.Root open | boolean, two-way bound | レビューの表示状態を制御。 |
| Dialog.Title / Description | Native title and description relationships | ARIA IDを手動で重複して指定する必要はありません。 |
| Dialog.Portal | Overlay and content rendered outside the normal panel | パネルの通常のドキュメントフローを使い、コンテンツの切り取りを防ぎます。 |
## Bits UI デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Bits UI デザインシステム：Svelte 5の状態管理とネイティブパーツを組み合わせる

### ネイティブパーツを Svelte 5 の状態と組み合わせる

> チェックリストでは、各回答、展開中のセクションID、ダイアログの表示状態に$stateを使います。$derivedによる完了数は、画面上の進捗表示と一括チェックボックスの両方に反映されます。これにより、信頼できる唯一の情報源を1つのSvelteモデルにまとめながら、各コンポーネントのネイティブな操作はBits UIに任せられます。

Checkbox、Accordion、Dialogは、それぞれのパーツを組み合わせて構成します。レビューダイアログがチェックリストの回答を管理する必要はなく、アコーディオンを閉じても回答を破棄する必要はありません。この分離は、複数セクションからなるフォームを設計する際の有効な出発点です。インターフェースのどの部分を表示するかが変わっても、モデルの状態は保持されます。

関連する仕様を確認する

## Bits UI デザインシステム：Svelte 5のコンポーネントとスタイルのソースを組み合わせる

### Svelte 5 のコンポーネントとスタイルのソースをあわせて使う

この例ではSvelte 5のrunesを使用します。グループ、展開中のセクション、ダイアログの表示状態、保存済み状態には$stateを、完了数には$derivedを使います。Bits UI 2.19.5を直接インポートします。この独自のビジュアルスタイルを実現するために、Tailwindプラグイン、テーマプロバイダー、アイコンライブラリは必要ありません。

App.svelteとstyle.cssは、一般的なVite Svelteプロジェクトで動作します。エントリーポイントでは、旧式のnew Appコンストラクターではなく、Svelteのmountを使います。この例を移植する際は、コンポーネントのrunes構文とBits UI 2.19.5の依存関係をセットで使用してください。ここに示すバインディングとコールバックは、旧式のSvelteコンポーネントAPIではありません。

関連する仕様を確認する

## Bits UI デザインシステム：個別のチェック項目から真の混在状態を導き出す

### 個々のチェックから正しい混在状態を導き出す

6つのブール値のチェック項目を3つのグループに分けています。一括操作のコントロールは、6項目すべてがtrueの場合にのみチェック済みとなり、1〜5項目がチェック済みの場合は不確定状態になります。onCheckedChangeコールバックですべての項目を更新するため、混在状態は別個に保存して同期がずれるフラグではなく、計算によって求められます。

各コントロールは小さな変更関数を呼び出し、モデルを更新するとともに保存済みのフィードバックを無効にします。ネイティブの一括チェックボックスは、項目を1つ選択するとaria-checked=mixedを公開します。スタイルシートはdata-state=checkedとdata-state=indeterminateに応じて表示を変えるため、動作と見た目は同じネイティブ状態に連動します。

1. 最初のフォーカスインジケーターのチェック項目を選択し、一括操作のコントロールに表示される横棒を確認します。

2. レビューのチェックリストを開き、「レビューを保存」が完了するまで無効になっていることを確認します。

3. 戻ってすべての項目にチェックを付け、完了した状態をローカルに保存します。

関連する仕様を確認する

## Bits UI デザインシステム：回答を保持したまま、セクションを個別に展開する

### 回答を保持したまま、セクションごとに独立して操作できるようにする

Accordion.Rootではtype=multipleを指定し、展開中のグループIDを配列にバインドします。キーボード操作では最初から展開された状態で開始します。一方、Formの修正とResultのフィードバックは、それぞれ独立して開けます。各値は親の状態に保持されるため、セクションを折りたたんでもチェック項目はクリアされません。

各トリガーには、そのセクションの完了数が表示されます。コンテンツを折りたたんでも進捗を確認できます。ネイティブのHeader、Trigger、Contentパーツによって、想定どおりの関連付けとキーボード操作が保たれます。プラス記号はトリガーのdata-stateに応じて回転します。独自のクリックハンドラーで展開状態を制御するのではなく、モーションの軽減設定にも対応します。

関連する仕様を確認する

## Bits UI デザインシステム：ダイアログの構成要素をすべて組み合わせ、フォーカスを適切に管理する

### ダイアログの構成要素をすべて組み合わせ、フォーカス管理を任せる

レビューにはDialog.Root、Trigger、Portal、Overlay、Content、Title、Description、Closeを使います。TitleとDescriptionは実際のネイティブパーツなので、Bits UIがそれらのアクセシブルな関連付けを設定できます。Portalにより、オーバーレイはチェックリストパネルの通常のフローの外に配置されます。

ダイアログのコンテンツには、レスポンシブ対応の幅の上限と、オーバーレイ内に限った高さの上限を設定し、レビューが長い場合にスクロールできるようにします。Escapeキーでダイアログを閉じても、チェックリストはクリアされません。オーバーレイを開く際にトリガーを削除せず、フォーカスを戻す対象として使える状態にしておきます。

関連する仕様を確認する

## Bits UI デザインシステム：アプリケーションのビジュアルルールを明示し、再利用する

### アプリケーションのビジュアルルールを明示して再利用する

CSSでは、チェック済み状態と不確定状態に同じアクションの役割を割り当て、それぞれ異なる記号を使います。フォーカスの役割はキーボード操作の位置を示すためのものです。コントロールは選択状態を視覚的に保ちながら、次のキーボード操作が行われる位置も同時に示せます。

名前付きの間隔スケールは4、8、12、16、24、32ピクセルです。パネルの余白には、デスクトップでは24ピクセル、狭い画面では16ピクセルを使います。仕様表には、再現や置き換えができるよう、こうした具体的な選択を独自設定として記載しています。サンプルのスタイルをパッケージの保証と誤解しないための配慮です。

関連する仕様を確認する

## Bits UI デザインシステム：手動のチェックと自動テストの結果を分ける

### 手動のチェックと自動テストの結果を分ける

このチェックリストには、読者がチェックした項目が記録されます。別のページを調べたり、キーボードテストを実行したり、アクセシビリティへの適合を証明したりするものではありません。6項目が実際のアクセシビリティ動作に関するチェックであるため、導入文とレビューの説明の両方で、この対象範囲を明確にしています。

6項目すべてにチェックを付けるまで、保存は無効です。保存後のメッセージでは、読者が6項目すべてにチェックを付けたことと、結果がローカルに保存されていることを伝えます。不足している項目を確認するために、未完了のレビューを開くことはできますが、レビュー完了のメッセージは表示されません。この違いにより、サンプルの状態遷移に意味を持たせています。

関連する仕様を確認する

## Bits UI デザインシステム：根拠が変わったら完了メッセージをクリア

### 根拠が変わったら、完了メッセージをクリアする

個別または一括で項目を変更すると、保存済みの状態がクリアされます。これにより、チェックを外した後も完了メッセージが残るのを防ぎます。「すべてクリア」アクションでは、最初に展開されていたセクションを復元し、レビューのダイアログを閉じて、関連するすべての状態を既知の初期状態に戻します。

ステータス領域はオーバーレイの外にあるため、ダイアログを閉じた後も保存メッセージはドキュメント内に残ります。このメッセージはページ内の状態を示し、レポートが送信されたと誤解させません。ページを再読み込みするとチェックリストは破棄されます。この自己完結型のデモでは適切な動作です。

関連する仕様を確認する

## Bits UI デザインシステム：コンポーネントの各パーツを表示ラベルに関連付ける

### コンポーネントの各パーツを表示ラベルに関連付ける

すべてのチェックボックスに固定IDと、それに関連付けられた表示ラベルがあります。チェック状態と中間状態はネイティブコントロールが表します。チェックマークとダッシュは装飾要素です。一部だけが選択された状態を通常の未チェック項目として読み上げないよう、真偽値のチェック状態と、そこから導出される中間状態の両方を一括操作用コントロールに連動させてください。

Dialog.TitleとDialog.Descriptionは、ネイティブな構成要素を通じてレビューの名前と説明を提供します。ポータルによってオーバーレイがアコーディオンのレイアウトから分離され、Dialog.Closeが明示的な閉じる操作になります。オーバーレイが閉じた後も、外側のステータス領域に保存結果が残るため、ダイアログのコンテンツと一緒に失われることはありません。

- 表示ラベルと対応するコントロールとの関連付けを維持してください。

- カスタムスタイルを適用した後も、フォーカス表示用の明確なリングを残してください。

- ダイアログのスタイルを変更する際に、タイトルや説明のパーツを削除しないでください。

関連する仕様を確認する

## Bits UI デザインシステムのコンポーネント例

### Svelte 5のチェックリスト一式

$state/$derivedモデル、制御されたチェックボックス、ポータルを使ったレビュー用ダイアログで構成する、ネイティブなBits UIのコンポジション。

```
<script>
import {Accordion,Checkbox,Dialog} from 'bits-ui';
let groups=$state([{id:'keyboard',name:'Keyboard flow',description:'Move through the interface without a pointer.',checks:[{id:'focus',label:'Every action has a visible focus indicator.',done:false},{id:'order',label:'Focus follows the visual reading order.',done:false}]},{id:'forms',name:'Form correction',description:'Make a mistake and recover from it.',checks:[{id:'labels',label:'Each input has a persistent visible label.',done:false},{id:'errors',label:'Errors identify the field and explain the correction.',done:false}]},{id:'feedback',name:'Result feedback',description:'Confirm that the outcome is understandable.',checks:[{id:'status',label:'A status message describes the completed action.',done:false},{id:'color',label:'Meaning remains clear without color alone.',done:false}]}]);
let expanded=$state(['keyboard']),open=$state(false),saved=$state(false);
const complete=$derived(groups.reduce((sum,g)=>sum+g.checks.filter(c=>c.done).length,0));
function change(check,value){check.done=value;saved=false}
function all(value){groups.forEach(g=>g.checks.forEach(c=>c.done=value));saved=false}
function reset(){all(false);expanded=['keyboard'];open=false}
</script>
<main class="check-shell"><header><p class="eyebrow">INTERFACE REVIEW · MANUAL CHECKLIST</p><h1>Check the experience between the screens.</h1><p>Work through six practical checks, then review what you have marked. This is a personal checklist, not an automated accessibility test.</p></header><div class="check-layout"><section class="check-panel"><div class="bulk"><Checkbox.Root id="all-checks" checked={complete===6} indeterminate={complete>0&&complete<6} onCheckedChange={all} class="checkbox"><span aria-hidden="true">{complete===6?'✓':complete>0?'−':''}</span></Checkbox.Root><label for="all-checks">Mark all checks</label><span class="count">{complete}/6</span></div><Accordion.Root type="multiple" bind:value={expanded} class="accordion">{#each groups as group}<Accordion.Item value={group.id} class="accordion-item"><Accordion.Header class="accordion-heading"><Accordion.Trigger class="accordion-trigger"><span>{group.name}<small>{group.checks.filter(c=>c.done).length} of 2 checked</small></span><span class="plus" aria-hidden="true">+</span></Accordion.Trigger></Accordion.Header><Accordion.Content class="accordion-content"><p class="group-description">{group.description}</p>{#each group.checks as check}<div class="check-row"><Checkbox.Root id={check.id} checked={check.done} onCheckedChange={value=>change(check,value)} class="checkbox"><span aria-hidden="true">{check.done?'✓':''}</span></Checkbox.Root><label for={check.id}>{check.label}</label></div>{/each}</Accordion.Content></Accordion.Item>{/each}</Accordion.Root><Dialog.Root bind:open><Dialog.Trigger class="primary">Review checklist</Dialog.Trigger><Dialog.Portal><Dialog.Overlay class="overlay"/><Dialog.Content class="dialog"><Dialog.Title class="dialog-title">Your review snapshot</Dialog.Title><Dialog.Description class="dialog-description">{complete} of 6 checks are marked. Saving records your own review state; it does not certify the interface.</Dialog.Description><ul class="review-summary">{#each groups as group}<li><strong>{group.name}</strong><span>{group.checks.filter(c=>c.done).length} / 2</span></li>{/each}</ul>{#if complete<6}<p class="remaining">Return to the checklist to finish the remaining {6-complete} checks.</p>{/if}<div class="dialog-actions"><Dialog.Close class="secondary">Back to checks</Dialog.Close><button class="primary" disabled={complete<6} onclick={()=>{saved=true;open=false}}>Save completed review</button></div></Dialog.Content></Dialog.Portal></Dialog.Root><button class="reset" onclick={reset}>Clear all checks</button><p class="result" role="status">{saved?'Completed review saved locally. All six checks were marked by you.':'Progress stays in this preview until you reload.'}</p></section><aside class="check-notes"><div class="focus-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="eyebrow">WHAT TO LOOK FOR</p><h2>Make the next action clear.</h2><p>A good check leaves evidence: where focus moved, what an error said, or how a result was announced.</p><dl><div><dt>Keyboard</dt><dd>Tab, Shift+Tab, Enter and Escape should support the relevant task.</dd></div><div><dt>Correction</dt><dd>Keep the user’s input and point to a specific next step.</dd></div><div><dt>Feedback</dt><dd>Describe the outcome in words as well as visual styling.</dd></div></dl></aside></div></main>
```

コードリファレンス

- マスターコントロールは、個々の6項目のチェック状態から、チェック済み状態と中間状態の両方を導出します。

- 保存できるかどうかは、ダイアログが開いているかではなく、すべての項目が完了しているかで決まります。

- この手動のワークシートは、アクセシビリティ監査を実行しません。

### オリジナルのビジュアル設定一式

名前付きのセマンティックカラー、スペーシングスケール、ネイティブなdata-stateセレクター、レスポンシブなオーバーレイスタイル。

```
:root{--app-canvas:#f4f3f8;--app-surface:#ffffff;--app-ink:#2d2938;--app-muted:#746d80;--app-line:#e3dfeb;--app-action:#604c88;--app-on-action:#fff;--app-focus:#9a80ce;--app-soft:#eee8f7;--app-radius:12px;--app-space-1:4px;--app-space-2:8px;--app-space-3:12px;--app-space-4:16px;--app-space-6:24px;--app-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:var(--app-canvas);color:var(--app-ink)}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid var(--app-focus);outline-offset:3px}.check-shell{max-width:1080px;margin:auto;padding:var(--app-space-8)}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--app-muted)}h1{font-size:34px;line-height:1.15;max-width:710px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;max-width:640px;color:var(--app-muted)}.check-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--app-space-6);margin-top:28px}.check-panel{background:var(--app-surface);border:1px solid var(--app-line);border-radius:16px;padding:var(--app-space-6);min-width:0}.bulk{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;padding-bottom:24px}.count{margin-left:auto;color:var(--app-muted);font-size:12px}.checkbox{width:22px;height:22px;flex-shrink:0;border:1px solid #aaa1ba;background:white;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}.checkbox[data-state=checked],.checkbox[data-state=indeterminate]{background:var(--app-action);border-color:var(--app-action);color:var(--app-on-action)}.accordion{margin-bottom:24px}.accordion-item{border-top:1px solid var(--app-line)}.accordion-item:last-child{border-bottom:1px solid var(--app-line)}.accordion-heading{margin:0;font-size:16px}.accordion-trigger{width:100%;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:20px 0;color:var(--app-ink);font-weight:600}.accordion-trigger small{display:block;font-weight:400;font-size:11px;color:var(--app-muted);margin-top:6px}.plus{font-size:23px;font-weight:400;transition:transform .15s}.accordion-trigger[data-state=open] .plus{transform:rotate(45deg)}.accordion-content{padding:0 0 20px}.group-description{font-size:12px;line-height:1.6;color:var(--app-muted);margin:0 0 16px}.check-row{display:flex;align-items:flex-start;gap:12px;margin-top:14px}.check-row label{font-size:13px;line-height:1.6;cursor:pointer}.primary,.secondary{border:1px solid transparent;border-radius:8px;padding:12px 16px;font-size:13px;font-weight:600}.primary{background:var(--app-action);color:var(--app-on-action)}.secondary{background:white;color:var(--app-ink);border-color:var(--app-line)}.reset{border:0;background:transparent;color:var(--app-muted);font-size:12px;padding:12px}.result{font-size:12px;line-height:1.6;color:var(--app-muted);margin:18px 0 0}.check-notes{min-width:0;padding:0 4px}.check-notes h2{font:400 29px/1.2 Georgia,serif}.check-notes>p:not(.eyebrow){font-size:13px;line-height:1.7;color:var(--app-muted)}.check-notes dl>div{padding:14px 0;border-top:1px solid var(--app-line)}.check-notes dt{font-size:13px;font-weight:600}.check-notes dd{font-size:12px;line-height:1.7;color:var(--app-muted);margin:5px 0 0}.focus-art{height:165px;background:#e6e0ef;border-radius:12px;position:relative;overflow:hidden;margin-bottom:24px}.focus-art span{position:absolute;width:140px;height:85px;left:35px;top:44px;background:white;border-radius:8px;transform:rotate(-9deg);box-shadow:0 0 0 6px #b3a3cd}.focus-art i{position:absolute;width:75px;height:13px;background:#b7adc6;left:60px;top:61px;transform:rotate(-9deg)}.focus-art b{position:absolute;width:72px;height:28px;background:#695587;left:87px;top:91px;border-radius:5px;transform:rotate(-9deg)}.overlay{position:fixed;inset:0;background:#21193180;z-index:20}.dialog{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;background:white;padding:24px;border-radius:14px;box-shadow:0 20px 80px #23193640}.dialog-title{font-size:23px;margin:0 0 12px}.dialog-description,.remaining{font-size:13px;line-height:1.7;color:var(--app-muted)}.review-summary{padding:0;list-style:none}.review-summary li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--app-line);font-size:13px}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}@media(max-width:740px){.check-layout{grid-template-columns:minmax(0,1fr)}.check-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.check-shell{padding:14px}.check-panel,.dialog{padding:16px}.check-panel>.primary,.dialog-actions>*{width:100%}}@media(prefers-reduced-motion:reduce){.plus{transition:none}}
```

コードリファレンス

- これらは独自の--app-*変数であり、公式のBitsパレットではありません。

- フォーカスと動きを抑える設定のスタイルを含みます。

- ビューポートに応じた最大高さを設定しているのは、オーバーレイのみです。

## Bits UI デザインシステムのエージェント設定

### 実装の出発点

Bits UI 2.19.5とSvelte 5.57.1で検証済みです。完全なオリジナルのスタイルシートが必要です。Bits UIにはデフォルトのカラーやページレイアウトは含まれていません。

```
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install svelte@5.57.1 bits-ui@2.19.5
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### あなたのプロジェクト向けプロンプト

```
Bits UI 2.19.5とSvelte 5を使って、提供された手動のインターフェースレビューを構築してください。3つのAccordionセクションに6つのチェック項目を配置し、個々の回答から一括操作用のチェック済み状態と中間状態を導出します。セクションを折りたたんでも回答を保持してください。レビューにはDialogの各パーツをすべて組み合わせて使い、未完了の状態でも内容を確認できるようにしつつ、6項目すべてにチェックを付けるまで「保存」を無効にしてください。回答が変更されるたびに、保存済みのフィードバックを無効にします。「すべてクリア」では最初の展開状態を復元し、レビューを閉じます。CSSをすべて含め、結果は読者がローカルでチェックした項目であり、自動アクセシビリティ認証ではないことを説明してください。
```

## Bits UI デザインシステムのソースと対象範囲

Bits UI 2.19.5とSvelte 5.57.1。オリジナルのアプリケーション用トークンとイラストを使用しています。これはローカル状態を使った手動チェックリストであり、自動アクセシビリティ監査や認証ではありません。

- はじめに Svelteのセットアップとパッケージの統合。

- スタイリング ヘッドレスなスタイリングの境界とデータ属性。

- チェックボックス チェック済み、中間、制御された状態。

- アコーディオン 複数の項目を展開できるネイティブな構成。

- ダイアログ ポータル、タイトル、説明、フォーカス、閉じる操作。

- 状態管理 バインディングと制御された値。

## Bits UI デザインシステムの関連リソース

### Bootstrap

Bootstrap 5.3.8の実際のスペーシングスケール、セマンティックカラー、レスポンシブグリッド、コンポーネントのAPIを使います。動作する予約フォーム、エラー概要、テーブルフィルター、モーダル、カラーモード切り替えを試し、ドキュメントに記載されたコードを再利用してください。

### Bulma

Bulmaの実際のフィールド／コントロール構造、レスポンシブなカラム、セマンティックカラーの修飾子、CSSの変数を使って編集デスクを構築し、検証コードもすべて含めます。

### Chakra UI

トークン、セマンティックカラーの役割、レシピ、複合フォームコンポーネントを確認できる、Chakra UI v3のリファレンスです。実際のスペーシングと文字サイズのスケールを確認し、検証、保存失敗のシミュレーション、ライト／ダーク表示を備えた、ネイティブなワークスペースプロフィールフォームを試してみましょう。


- [実装リファレンス](https://www.bits-ui.com/docs/components/checkbox)
- [ソース](https://www.bits-ui.com/docs/styling)
- [ソース](https://www.bits-ui.com/docs/components/dialog)
- [関連する仕様を確認する](https://www.bits-ui.com/docs/styling)
- [関連する仕様を確認する](https://www.bits-ui.com/docs/getting-started)
- [関連する仕様を確認する](https://www.bits-ui.com/docs/components/checkbox)
- [関連する仕様を確認する](https://www.bits-ui.com/docs/components/accordion)
- [関連する仕様を確認する](https://www.bits-ui.com/docs/components/dialog)
- [関連する仕様を確認する](https://www.bits-ui.com/docs/state-management)
- [コードリファレンス](https://www.bits-ui.com/docs/components/checkbox)
- [コードリファレンス](https://www.bits-ui.com/docs/styling)
- [はじめに Svelteのセットアップとパッケージの統合。](https://www.bits-ui.com/docs/getting-started)
- [スタイリング ヘッドレスなスタイリングの境界とデータ属性。](https://www.bits-ui.com/docs/styling)
- [チェックボックス チェック済み、中間、制御された状態。](https://www.bits-ui.com/docs/components/checkbox)
- [アコーディオン 複数の項目を展開できるネイティブな構成。](https://www.bits-ui.com/docs/components/accordion)
- [ダイアログ ポータル、タイトル、説明、フォーカス、閉じる操作。](https://www.bits-ui.com/docs/components/dialog)
- [状態管理 バインディングと制御された値。](https://www.bits-ui.com/docs/state-management)