Switch
即時反映する二値設定をネイティブの checked 状態とフォームセマンティクスで切り替えます。
主なプロパティ
| プロパティ | 選択肢 |
|---|---|
| 状態 | 非制御は defaultChecked、制御は checked と onCheckedChange を使います。 |
| 利用可否 | readOnly はフォーカスとフォーム値を保ち、disabled は操作と送信を除外します。 |
| セマンティクス | 即時反映する設定に使い、まとめて送信する選択にはチェックボックスを使います。 |
| フォーム | name、value、uncheckedValue、form、required、ネイティブリセット |
TRField.Item の中に TRField.Label を置くか、aria-label でアクセシブルな名前を付けます。Field.Item がラベルとスイッチを関連付けるため、id や htmlFor を手動で指定する必要はありません。編集可能なスイッチにフォーカスがあるとき、Space キーで切り替えます。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/switch.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRField } from '@tinyrack/ui/components/field';
import { TRSwitch } from '@tinyrack/ui/components/switch';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
現在の設定を示す
操作を維持または除外する
編集可能、読み取り専用、無効 パーマリンク
読み取り専用はフォーカスとフォーム値を保ち、無効はタブ順序と送信から外れます。
確認を必須にする
API
状態と利用可否
| プロパティ | 型 / 既定値 | 用途 |
|---|---|---|
checked, defaultChecked | boolean, false | 設定を制御または初期化します。 |
onCheckedChange | (checked, details) => void | 変更の試行を通知します。 |
disabled, readOnly | boolean, false | 操作を除外するか、フォーカス可能な不変値を保ちます。 |
フォームと合成
name、value、uncheckedValue、form、required、inputRef は非表示のネイティブ入力へ渡されます。非制御ルートはリセット時に defaultChecked へ戻り、制御ルートは checked に従います。Root と Thumb は Base UI の render、ref、イベント、状態に応じた className と style をサポートします。
モジュールは TRSwitch、各パーツ、prop・状態型を公開します。CSS は明示的に読み込みます。