ToggleButtonGroup

Toggle buttons of which one or several are selected.

Solidtype_heroui.Toggle_button_group is Kobalte’s toggle group with the classes HeroUI’s own toggleButtonGroupVariants gives: a group of Toggle_buttons, each named by its id, of which one or several are selected. It gives the buttons inside it its size and is_disabled, each where a button sets none itself.

The group is Kobalte’s: one Tab stop, the arrow keys between its buttons, each a button pressed or not. React Aria’s is a radio group of radios where one is selected, or a toolbar, each button a Tab stop; both are accessible, and the port keeps Kobalte’s.

Usage

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <Toggle_button_group selection_mode=`multiple aria_label="Text formatting">
    <Toggle_button is_icon_only=true aria_label="Bold" id="bold">
      <Icons.Bold />
    </Toggle_button>
    <Toggle_button is_icon_only=true aria_label="Italic" id="italic">
      <Toggle_button_group.Separator /> <Icons.Italic />
    </Toggle_button>
    <Toggle_button is_icon_only=true aria_label="Underline" id="underline">
      <Toggle_button_group.Separator /> <Icons.Underline />
    </Toggle_button>
    <Toggle_button
      is_icon_only=true aria_label="Strikethrough" id="strikethrough">
      <Toggle_button_group.Separator /> <Icons.Strikethrough />
    </Toggle_button>
  </Toggle_button_group>

Anatomy

<Toggle_button_group selection_mode=`multiple aria_label="Steps">
  <Toggle_button id="first">"First"</Toggle_button>
  <Toggle_button id="second">
    <Toggle_button_group.Separator /> "Second"
  </Toggle_button>
</Toggle_button_group>

Examples

Sizes

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <div class_="flex flex-col gap-4">
    <Toggle_button_group size=`sm aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
    <Toggle_button_group size=`md aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
    <Toggle_button_group size=`lg aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
  </div>

Orientation

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <div class_="flex gap-8">
    <Toggle_button_group aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
    <Toggle_button_group orientation=`vertical aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
  </div>

Full Width

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <div class_="w-full max-w-md">
    <Toggle_button_group full_width=true aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
  </div>

Disabled

is_disabled disables each button that sets none itself. A button’s own is_disabled=false keeps it enabled in a disabled group, as HeroUI documents; HeroUI’s React group, on React Aria’s, disables it all the same.

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

(* A disabled group, and one whose third button keeps itself enabled, as
   HeroUI documents. *)
let make () =
  <div class_="flex flex-col gap-4">
    <Toggle_button_group is_disabled=true aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right">
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
    <Toggle_button_group is_disabled=true aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center">
        <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
      </Toggle_button>
      <Toggle_button id="right" is_disabled=false>
        <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
      </Toggle_button>
    </Toggle_button_group>
  </div>

Without Separator

A button without a Toggle_button_group.Separator draws no line before it.

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <Toggle_button_group aria_label="Alignment">
    <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
    <Toggle_button id="center"><Icons.Align_center /> "Center"</Toggle_button>
    <Toggle_button id="right"><Icons.Align_right /> "Right"</Toggle_button>
  </Toggle_button_group>

Detached

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <div class_="flex flex-col gap-4">
    <Toggle_button_group is_detached=true aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center"><Icons.Align_center /> "Center"</Toggle_button>
      <Toggle_button id="right"><Icons.Align_right /> "Right"</Toggle_button>
    </Toggle_button_group>
    <Toggle_button_group
      is_detached=true orientation=`vertical aria_label="Alignment">
      <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
      <Toggle_button id="center"><Icons.Align_center /> "Center"</Toggle_button>
      <Toggle_button id="right"><Icons.Align_right /> "Right"</Toggle_button>
    </Toggle_button_group>
  </div>

Selection Mode

`single lets one button at most be selected, `multiple any. disallow_empty_selection keeps the last selected button from being unselected.

Single selection

Multiple selection

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <div class_="flex flex-col gap-6">
    <div class_="flex flex-col gap-2">
      <span class_="text-sm text-muted">"Single selection"</span>
      <Toggle_button_group
        default_selected_keys=(fun () -> [| "center" |])
        selection_mode=`single
        aria_label="Alignment">
        <Toggle_button id="left"><Icons.Align_left /> "Left"</Toggle_button>
        <Toggle_button id="center">
          <Toggle_button_group.Separator /> <Icons.Align_center /> "Center"
        </Toggle_button>
        <Toggle_button id="right">
          <Toggle_button_group.Separator /> <Icons.Align_right /> "Right"
        </Toggle_button>
      </Toggle_button_group>
    </div>
    <div class_="flex flex-col gap-2">
      <span class_="text-sm text-muted">"Multiple selection"</span>
      <Toggle_button_group
        default_selected_keys=(fun () -> [| "bold"; "underline" |])
        selection_mode=`multiple
        aria_label="Text formatting">
        <Toggle_button is_icon_only=true aria_label="Bold" id="bold">
          <Icons.Bold />
        </Toggle_button>
        <Toggle_button is_icon_only=true aria_label="Italic" id="italic">
          <Toggle_button_group.Separator /> <Icons.Italic />
        </Toggle_button>
        <Toggle_button is_icon_only=true aria_label="Underline" id="underline">
          <Toggle_button_group.Separator /> <Icons.Underline />
        </Toggle_button>
        <Toggle_button
          is_icon_only=true aria_label="Strikethrough" id="strikethrough">
          <Toggle_button_group.Separator /> <Icons.Strikethrough />
        </Toggle_button>
      </Toggle_button_group>
    </div>
  </div>

Controlled

selected_keys gives the selected buttons’ ids, and on_selection_change is called with them all.

Selected: bold

module S = Solidtype.Solid
module Jsx = Solidtype.Jsx
module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  let keys, set_keys = S.create_signal [| "bold" |] in
  <div class_="flex flex-col gap-4">
    <Toggle_button_group
      selected_keys=(fun () -> S.get keys)
      selection_mode=`multiple
      on_selection_change=(S.set set_keys)
      aria_label="Text formatting">
      <Toggle_button is_icon_only=true aria_label="Bold" id="bold">
        <Icons.Bold />
      </Toggle_button>
      <Toggle_button is_icon_only=true aria_label="Italic" id="italic">
        <Toggle_button_group.Separator /> <Icons.Italic />
      </Toggle_button>
      <Toggle_button is_icon_only=true aria_label="Underline" id="underline">
        <Toggle_button_group.Separator /> <Icons.Underline />
      </Toggle_button>
      <Toggle_button
        is_icon_only=true aria_label="Strikethrough" id="strikethrough">
        <Toggle_button_group.Separator /> <Icons.Strikethrough />
      </Toggle_button>
    </Toggle_button_group>
    <p class_="text-sm text-muted">
      "Selected: "
      <span class_="font-medium">
        (fun () ->
          Jsx.string
            (match S.get keys with
            | [||] -> "None"
            | ks -> String.concat ", " (Array.to_list ks)))
      </span>
    </p>
  </div>

Customization

Tailwind CSS

class_ is added after HeroUI’s classes, on the group and on each button.

module Toggle_button = Solidtype_heroui.Toggle_button
module Toggle_button_group = Solidtype_heroui.Toggle_button_group

let make () =
  <Toggle_button_group
    class_="gap-1 rounded-full bg-surface-secondary p-1"
    default_selected_keys=(fun () -> [| "left" |])
    is_detached=true
    aria_label="Alignment">
    <Toggle_button class_="rounded-full" id="left">
      <Icons.Align_left /> "Left"
    </Toggle_button>
    <Toggle_button class_="rounded-full" id="center">
      <Icons.Align_center /> "Center"
    </Toggle_button>
    <Toggle_button class_="rounded-full" id="right">
      <Icons.Align_right /> "Right"
    </Toggle_button>
  </Toggle_button_group>

Global CSS

@layer components {
  .toggle-button-group {
    @apply gap-1;
  }

  .toggle-button-group__separator {
    @apply opacity-25;
  }
}

Styling Reference

CSS Classes

.toggle-button-group, and its orientations .toggle-button-group--horizontal, .toggle-button-group--vertical
.toggle-button-group--full-width
.toggle-button-group--detached
.toggle-button-group__separator

Interactive States

Disabled: [data-disabled="true"] on the group, while it is disabled

Each button shows its own state, as Solidtype_heroui.Toggle_button does.

API Reference

Each prop beside the name HeroUI’s React component gives it.

ToggleButtonGroup

React	solidtype	Type	Default	Description
`selectionMode`	`selection_mode`	[ `single \| `multiple ]	`single	How many buttons may be selected
`selectedKeys`	`selected_keys`	`string array`		The selected buttons’ ids, while given
`defaultSelectedKeys`	`default_selected_keys`	`string array`	`[\|\|]`	Those selected at first
`onSelectionChange`	`on_selection_change`	`string array -> unit`		Called with the selected ids
`disallowEmptySelection`	`disallow_empty_selection`	`bool`	`false`	Whether the last selected stays selected
`orientation`	`orientation`	[ `horizontal \| `vertical ]	`horizontal	How the buttons are arranged
`size`	`size`	[ `sm \| `md \| `lg ]		The size of each button that sets none
`isDetached`	`is_detached`	`bool`	`false`	Whether its buttons are set apart
`fullWidth`	`full_width`	`bool`	`false`	Whether it takes its container’s width
`isDisabled`	`is_disabled`	`bool`	`false`	Whether each button that sets none is disabled
`aria-label`	`aria_label`	`string`		Its name
`aria-labelledby`	`aria_labelledby`	`string`		The id of what names it
`className`	`class_`	`string`		Added after HeroUI’s classes
`children`	`children`	elements		Its buttons

ToggleButtonGroup.Separator

React	solidtype	Type	Description
`className`	`class_`	`string`	Added after HeroUI’s class

Beside React

Original HeroUI documentation: ToggleButtonGroup.

The same HeroUI ToggleButtonGroup twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two groups: a marked row is one they disagree on, and a dimmed row is a framework’s own, which no style reads. The group’s role, and React Aria’s aria-orientation and aria-disabled, are the two accessible patterns above; tabindex is Kobalte’s one Tab stop.

selection modesizeorientationdetachedfull widthdisabled

solidtype — OCaml, on Solid and Kobalte

React — TypeScript, on React Aria

attribute	solidtype	React