Skip to content


Containers are widgets that may contain multiple child widgets. Some examples of such widgets are Box, ListBox, and Paned.

Just like single widgets and bins, the container function takes as arguments a widget constructor and a list of properties. The third argument however, is a collection of child widgets.

Container and Children Types

Different container widgets use different types to help you construct a valid widget hierarchy. These types are enforcing the existing GTK+ widget rules, that otherwise would be printed as warnings or errors.

Things that vary between container widget types are:

  • The types of their child widgets
  • The type of collection used to pass the children as a parameter


In the case of Box, the collection of child widgets has type [BoxChild event].

container Box []
  [ BoxChild defaultBoxChildProperties (widget Button [])
  , BoxChild defaultBoxChildProperties (widget CheckButton [])

As BoxChildProperties is a record, it's easy to override the defaults with custom values, specifying how the child should be packed in the box.

container Box []
  [ BoxChild defaultBoxChildProperties { padding = 10 }
      (widget Button [])
  , BoxChild defaultBoxChildProperties { expand = True }
      (widget CheckButton [])

For convenience, widgets can be wrapped in BoxChild values automatically using the default box packing properties.

container Box []
  [ widget Button []
  , widget CheckButton []


The collection of child widgets used with ListBox is of type [Bin ListBoxRow Widget event], where ListBoxRow is the regular constructor defined in the gi-gtk package. Instead of accepting any [Widget event], the type constrains its usage to only accept proper ListBoxRow widgets as children.

container ListBox []
  [ bin ListBoxRow [] (widget Button [])
  , bin ListBoxRow [] (widget CheckButton [])


The Paned widget in GTK+ has two panes, which contain one widget each. While Paned widgets can be constructed using the container function, the smart constructor paned is recommended. It takes a list of attributes, along with two Pane values.

  [#wideHandle := True]
  (pane defaultPaneProperties { resize = True } $
    widget Label [#label := "Left"])
  (pane defaultPaneProperties { resize = True, shrink = False } $
    widget Label [#label := "Right"])

Each Pane is constructed using the pane function, which takes a PaneProperties value and a child widget. These pane property values are used to call the underlying pack1/pack2 functions on the GTK+ widget.