← 一覧へ

やってみよう曜日のボタンを押してみてください

ボタン・操作部品マイナー(知る人ぞ知る)

トグルボタン(曜日の選択)

Toggle Button Group

「月 火 水…」の丸いボタンが並び、押すと色が付いて選べる。いくつでも選べる。

別名曜日選択トグルボタングループ丸い選択ボタン複数選べるボタン

どこで使われている?

よく見かける場所
目覚ましアラームの繰り返し、習慣アプリ、お店の営業日の設定
使うとよい場面
少ない選択肢から、いくつかを選んでもらうとき
避けたい場面
1つだけ選ぶとき(セグメントコントロールかラジオボタンを使う)

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「トグルボタン(曜日の選択)(Toggle Button Group)」を実装してください。

動き:選べるものを同じ大きさの丸いボタンで横に並べ、押すたびに選択(塗りつぶし)と解除(ふちだけ)を切り替える。複数選べ、下に「平日」「毎日」などの選び方の要約を出す。

使う部品:aria-pressed を持つボタンを並べる(自作)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトならaria-pressed を持つボタンを並べる(自作)
iPhoneアプリなら自作(Toggle の button スタイル)
AndroidアプリならFilterChip(または IconToggleButton)を並べる
FlutterならToggleButtons(または FilterChip)
React Nativeなら自作