Toggle
書式や表示オプションのための 2 状態 button です。aria-pressed を公開しますが、フォームフィールドではなく値も送信しません。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
| state | controlled pressed or uncontrolled defaultPressed | off |
| availability | enabled or disabled | enabled |
| label | visible text | required |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/toggle.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRToggle } from '@tinyrack/ui/components/toggle';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
API
| プロパティ | 型 | 既定値 | 用途 |
|---|---|---|---|
pressed | boolean | — | pressed 状態を制御します。 |
defaultPressed | boolean | false | 非制御状態の初期値を設定します。 |
onPressedChange | (pressed, details) => void | — | 要求された状態変更を通知します。details.cancel() で変更を取り消せます。 |
disabled | boolean | false | button を操作と順次 focus の対象から外します。 |
value | string | 自動生成 | TRToggleGroup 内の item を識別します。group 内では安定した値を指定してください。 |
className | string | (state) => string | — | consumer class を追加し、TRToggleState を利用できます。 |
render | ReactElement | (props, state) => ReactElement | <button> | 統合された動作を保ったまま描画要素を置き換えます。 |
TRToggleProps と TRToggleState は @tinyrack/ui/components/toggle から export されます。TRToggle は button ref、style、ネイティブ属性、event handler も保ちます。ネイティブの Space/Enter activation、focus、disabled の意味は button の動作に従い、既定の button type は親 form を送信しません。すべての toggle に accessible name を指定してください。polymorphic render は button keyboard semantics を保つ必要があります。フォーム送信や required 検証に値を参加させる場合は TRCheckbox または TRSwitch を使います。