Button Group

fandhe-frontend-pre-styled-ui の button_group mod が提供するスタイル済み Button Group 部品です。Root / Separator / Text の 3 パーツ構成で、関連するボタンを角丸・境界線で 1 つの連結表示にまとめます。先頭・末尾以外の隣接要素の角丸・開始側境界線を無効化することで連結表示を作り、対象は Button だけでなく Input / Select trigger / Menu trigger にも及びます。data-orientation によって横並び（既定）と縦積みを切り替えられます。role="group" の静的なグループであり、状態機械を持つ Toolbar の roving tabindex とは異なり、子ボタンのフォーカス順序はネイティブの Tab 順序に委ねます。size / variant / color-palette いずれの軸も持たず、寸法・文字サイズは内側のボタン・入力欄に従属します。縦横混在のレイアウト（上段に入力欄、下段に横並びボタン等）はグループの入れ子で表現できます。内側グループへ値なし属性 data-attached を付与すると、既定の margin 間隔を打ち消し、外側グループと枠線を共有する 1 つの連結表示にする opt-in 表現も使えます（Examples 節参照）。接続されるのは隣接する兄弟のどちらも「data-attached なしの内側グループ」でない辺だけで、入力欄やボタンと attached グループは連結し、間隔を保つ通常の内側グループに面した辺は角丸を保ちます。

バリデーション・送信処理・クリックハンドラといったアプリケーションロジックはこの部品では実装しません。

Demo

headless-ui の Button Group（root/separator/text の 3 anatomy パーツ、role="group" の静的グループ）に pre-styled-ui の recipe CSS を適用した静的掲示です。先頭・末尾以外の隣接ボタンの角丸・開始側境界線を raw CSS 追記で無効化し 1 つの連結表示に見せます（:has() 不採用のためネストは margin 代替、src/button_group.rs モジュール doc 参照）。1 つ目は基本形、2 つ目は text/separator を含む構成、3 つ目は vertical、4 つ目は Input、5 つ目は Menu trigger を内包した合成です（イシュー #2060、親 #2058）。

Sort by:

Features

関連ボタンを角丸・境界線でひとつのグループに見せる静的なグループ化コンテナ（shadcn/ui Button Group 相当）。Root / Separator / Text の 3 anatomy パーツを持つ。
crate::toolbar の roving tabindex（矢印キーでフォーカスが移動する複合ウィジェット）とは異なり、状態機械を持たない静的なグループである。子 button のフォーカス順序はネイティブの Tab 順序に委ねる。
先頭・末尾以外の隣接要素の角丸・開始側境界線幅を pre-styled-ui 側の raw CSS 追記（[data-scope="button-group"][data-part="root"] > <child>:not(:first-child) 等）で無効化し、1 つの連結表示に見せる。対象は button / input / text / menu trigger / select trigger の 5 種。
data-orientation による横並び（既定）/ 縦積みの切り替え（root に固定出力、aria-orientation は role="group" へ許可されないため付与しない）。
separator はグループ自身の向きと直交する aria-orientation/data-orientation を出力する（横並びグループの区切り線は縦線になる、crate::toolbar::separator と同じ判断）。
ネスト（グループの中にグループ）を許容する。:has() の先例がないため、内側 root は角丸連結対象へ含めず、代わりに先頭以外の内側グループへ margin のみ付与する（shadcn の :has(>[data-slot=button-group]) gap 相当の代替表現）。既定はこの margin 間隔のままだが、内側 root へ呼び出し側が値なし属性 data-attached を付与すると、間隔を打ち消し接続辺の角丸・境界線を解除する opt-in CSS が適用され、外側グループと枠線を共有する 1 つの連結表示になる（イシュー #3135）。
size / variant / color-palette いずれの軸も提供しない（子の寸法に従属するレイアウト部品、docs/design/pre-styled-ui-focus-ring-and-size-conventions.md §4 (d)）。バリデーション・送信処理等のアプリケーションロジックは内包しない（.claude/rules/coding-rust.md §3.25）。

Anatomy

root
  text
  separator

API Reference

Arguments

Name	Type	Default	Description
`orientation`	`Orientation`	`Orientation::Horizontal`	root の data-orientation に反映する向き（Horizontal/Vertical）。separator へは直交した値が渡る。
`label`	`&str`	—	root に付与する aria-label（空文字列のときは省略）。

Data Attributes

Part	Attribute	Observed Values
`root`	`data-orientation`	`horizontal`, `vertical`
`separator`	`data-orientation`	`vertical`

Examples

分割ボタン（塗りトリガー + 補助メニュー、イシュー #3124 R1239）

button_group::root が「menu trigger を角丸連結対象に含める」契約（上記 Features 参照）を使い、塗り（ButtonVariant::Solid）の主操作ボタンと、同じ塗りのアイコンのみメニュートリガーを 1 つの連結表示にまとめる合成例です。新しい部品・CSS は追加しません（メニューは静的な閉状態で固定、OpenState::Open 等の開閉状態機械はクライアント配線層の責務）。

入れ子 + data-attached で入力欄を縦横混在連結する

縦（Orientation::Vertical）の外側グループの中に、入力欄（上段）と横（Orientation::Horizontal）の内側グループ（下段、2 入力欄）を並べる合成例です（イシュー #3135）。内側グループの root へ呼び出し側が data-attached を付与すると、pre-styled-ui 側の opt-in CSS（上記 Features 参照）が間隔を打ち消し接続辺の角丸・境界線を解除するため、外側グループと枠線を共有する 1 つの連結表示になります（data-attached を付与しない既定の入れ子表現は margin による間隔のまま変わりません）。

Accessibility

WAI-ARIA

Attribute	Description
role="group"	root に付与（aria-orientation は role="group" に許可されないため付与しない）。
role="separator" / aria-orientation	separator に付与。グループ自身の向きと直交する値になる。