SegmentedControl

特定のオブジェクトの異なる状態を切り替えて表示するためのコンポーネントです。オブジェクトの持つ情報を別の見方へ変更するときに使います。

特定のオブジェクトに対して異なる状態を切り替える具体例としては、以下が挙げられます。

  • 組織図オブジェクトを「組織図表示」「従業員名簿表示」でビューを切り替える
  • 書類グループオブジェクトを「書類一覧」「従業員一覧」でビューを切り替える
処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

オブジェクト自体を切り替える場合はTabBarを使用する

SegmentedControlは、ビューに存在するオブジェクト自体を切り替える場合には適していません。

オブジェクト自体を切り替えて表示する場合は、TabBarを使ってください。

オン・オフを切り替える場合にはSwitchを使用する

SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オンとオフの2つの状態を切り替えるときはSwitchを使ってください。

Submitが発生する操作の選択項目にはRadioButtonを使用する

「複数の選択肢から1つを選ぶ」という振る舞いはRadioButtonと似ていますが、SegmentedControlは操作すると即座にビューに対して影響が発生することが特徴です。

選択操作後に、送信保存といったtype属性がsubmitのボタンなどを押すことで入力内容を適用したい場合は、RadioButtonを使ってください。

Props

options必須
Option[]

選択肢の配列

value
string

選択中の値

onClickOption
(value: string) => void

選択肢を押下したときに発火するコールバック関数

size
"s""default"

各ボタンの大きさ

isSquare
falsetrue

各ボタンを正方形にするかどうか。アイコンボタンを使用する場合に指定します。

className
string

コンポーネントに適用するクラス名