SegmentedControl
同一オブジェクトの異なる状態や視点を切り替えるためのコンポーネントです。リスト表示とカード表示の切替など、選択と同時に即座に表示を変えるときに使います。
特定のオブジェクトに対して異なる状態を切り替える具体例としては、以下が挙げられます。
- 組織図オブジェクトを「組織図表示」「従業員名簿表示」でビューを切り替える
- 書類グループオブジェクトを「書類一覧」「従業員一覧」でビューを切り替える
使用上の注意
オブジェクト自体を切り替える場合はTabBarを使用する
SegmentedControlは、ビューに存在するオブジェクト自体を切り替える場合には適していません。
オブジェクト自体を切り替えて表示する場合は、TabBarを使ってください。
オン・オフを切り替える場合にはSwitchを使用する
SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オンとオフの2つの状態を切り替えるときはSwitchを使ってください。
選択とは別に適用操作をする場合はRadioButtonを使用する
「複数の選択肢から1つを選ぶ」という振る舞いはRadioButtonと似ていますが、SegmentedControlは操作すると即座にビューに対して影響が発生することが特徴です。
選択操作後に、送信や保存などのボタンを押して入力内容を適用する場合は、RadioButtonを使ってください。
モバイル
ボタンを折り返して表示しない
モバイル表示など画面幅が小さくなった際に、SegmentedControlのボタンが折り返さないようにしてください。 レイアウトに応じて以下のような対応を検討します。
- ボタンのラベルを折り返す
- Reelを使用して水平方向にスクロールさせる
SサイズのSegmentedControlを使用する（どうしようもないときにのみ）
Don't
画面幅が小さくなるとボタンが折り返してしまう。
Do
ボタンのラベルを折り返して画面幅に収める。
Do
Reelを使用して水平方向にスクロールさせる。
使い方チェックリスト
SegmentedControl
参照元：使用上の注意 > オブジェクト自体を切り替える場合はTabBarを使用する 「使用上の注意 > オブジェクト自体を切り替える場合はTabBarを使用する」の本文へ移動
- Mustビューに存在するオブジェクト自体を切り替える場合は TabBar を使う
参照元：使用上の注意 > オン・オフを切り替える場合にはSwitchを使用する 「使用上の注意 > オン・オフを切り替える場合にはSwitchを使用する」の本文へ移動
- Mustオンとオフの 2 つの状態を切り替えるときは Switch を使う
参照元：使用上の注意 > 選択とは別に適用操作をする場合はRadioButtonを使用する 「使用上の注意 > 選択とは別に適用操作をする場合はRadioButtonを使用する」の本文へ移動
- Must選択操作後に `送信` や `保存` などのボタンを押して入力内容を適用する場合は RadioButton を使う
参照元：モバイル > ボタンを折り返して表示しない 「モバイル > ボタンを折り返して表示しない」の本文へ移動
- Mustモバイル表示など画面幅が小さくなった際に SegmentedControl のボタンを折り返さない
- ボタンのラベルを折り返す
- Reel を使用して水平方向にスクロールさせる
- `S` サイズの SegmentedControl を使用する（どうしようもないときにのみ）
Props
options必須
Option[]
選択肢の配列
value
string
選択中の値
onClickOption
(value: string) => void
選択肢を押下したときに発火するコールバック関数
size
"S" "M"
各ボタンの大きさ