Toggle
: Copmonent View on GitHub設定をオンまたはオフに切り替えるためのコンポーネント
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
で通信を伴うなど待機時間が生まれる場合には、楽観的に状態を更新することが好まれます。