Selects one out of multiple options. This can be used for radio buttons or Menus.

Selects multible options. This can be used for checkboxes.

Some collapsable content.

    Widget.collapsable
        {onToggle = ToggleCollapsable
        ,isCollapsed = model.isCollapsed
        ,label = Element.row Grid.compact
            [ Element.html <|
                if model.isCollapsed then
                    Heroicons.cheveronRight  [ Attributes.width 20]
                else
                    Heroicons.cheveronDown [ Attributes.width 20]
            , Element.el Heading.h4 <|Element.text <| "Title"
            ]
        ,content = Element.text <| "Hello World"
        }

A Carousel circles through a non empty list of contents.

    Widget.carousel
        {content = ("Blue",["Yellow", "Green" , "Red" ]|> Array.fromList)
        ,current = model.carousel
        , label = \c ->
            [ Input.button [Element.centerY]
                { onPress = Just <|
                     SetCarousel <|
                        (\x -> if x < 0 then 0 else x) <|
                            model.carousel - 1
                , label = "<" |> Element.text
                }
            , c |> Element.text
            , Input.button [Element.centerY]
                { onPress = Just <|
                    SetCarousel <|
                        (\x -> if x > 3 then 3 else x) <|
                        model.carousel + 1
                , label = ">" |> Element.text
                }
            ]
            |> Element.row [Element.centerX, Element.width<| Element.shrink]
        }

A dialog element displaying important information.

    Framework.Layout
        [ Element.inFront <|
            if model.displayDialog then
                Widget.dialog
                    { onDismiss = Just <| ToggleDialog False
                    , content =
                        [ "This is a dialog window"
                            |> Element.text
                        , Input.button []
                            {onPress = Just <| ToggleDialog False
                            , label = Element.text "Ok"
                            }
                        ]
                        |> Element.column []
                    }
            else Element.none
        ] <|
            Element.text "some Content"

Displayes a list of contents in a tab