Toggle
View on GitHub: Copmonent設定をオンまたはオフに切り替えるためのコンポーネント
Example#
Props#
<input>要素をベースにしています。 表にない属性もprop経由で使用できます(classNameは除く)。
| Name | Type | Default | Description |
|---|---|---|---|
| checked optional | boolean | - | 現在の状態が選択中かどうか |
| data-* optional | string | - | Custom data attributes |
| defaultChecked optional | boolean | - | 初期状態で選択状態とする |
| disabled optional | boolean | - | 無効状態かどうか |
Feature#
- 設定項目が2つの状態のみを持つ場合(例えば、設定の有効/無効)に適しています。
- ユーザーが行った選択をすぐに反映させるシナリオに適しており、直感的に操作できるように設計されています。
Usage#
checkedとonChangeを使用して値をコントロールして使用してください。onChangeで通信を伴うなど待機時間が生まれる場合には、楽観的に状態を更新することが好まれます。