Add checkbox widget (closes #6)

explorer/index.html

@@ -21534,6 +21534,289 @@ var $author$project$Page$Button$description = 'Buttons allow users to take actio
 var $author$project$Page$Button$title = 'Button';
 var $author$project$Page$Button$page = $author$project$Page$create(
 	{book: $author$project$Page$Button$book, demo: $author$project$Page$Button$demo, description: $author$project$Page$Button$description, title: $author$project$Page$Button$title});
+var $elm$core$Basics$pi = _Basics_pi;
+var $elm$core$Basics$degrees = function (angleInDegrees) {
+	return (angleInDegrees * $elm$core$Basics$pi) / 180;
+};
+var $mdgriffith$elm_ui$Internal$Model$Rotate = F2(
+	function (a, b) {
+		return {$: 'Rotate', a: a, b: b};
+	});
+var $mdgriffith$elm_ui$Internal$Flag$rotate = $mdgriffith$elm_ui$Internal$Flag$flag(24);
+var $mdgriffith$elm_ui$Element$rotate = function (angle) {
+	return A2(
+		$mdgriffith$elm_ui$Internal$Model$TransformComponent,
+		$mdgriffith$elm_ui$Internal$Flag$rotate,
+		A2(
+			$mdgriffith$elm_ui$Internal$Model$Rotate,
+			_Utils_Tuple3(0, 0, 1),
+			angle));
+};
+var $mdgriffith$elm_ui$Element$transparent = function (on) {
+	return on ? A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$transparency,
+		A2($mdgriffith$elm_ui$Internal$Model$Transparency, 'transparent', 1.0)) : A2(
+		$mdgriffith$elm_ui$Internal$Model$StyleClass,
+		$mdgriffith$elm_ui$Internal$Flag$transparency,
+		A2($mdgriffith$elm_ui$Internal$Model$Transparency, 'visible', 0.0));
+};
+var $author$project$Internal$Material$Checkbox$checkbox = function (palette) {
+	var rounded = F3(
+		function (bg, opacity, color) {
+			var scaledColor = $author$project$Widget$Material$Color$fromColor(
+				A2($author$project$Widget$Material$Color$scaleOpacity, opacity, color));
+			return A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$Border$shadow(
+					{
+						blur: 0,
+						color: scaledColor,
+						offset: _Utils_Tuple2(0, 0),
+						size: 10
+					}),
+				bg ? _List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Background$color(scaledColor)
+					]) : _List_Nil);
+		});
+	var check = function (visible) {
+		return $mdgriffith$elm_ui$Element$inFront(
+			A2(
+				$mdgriffith$elm_ui$Element$el,
+				_List_fromArray(
+					[
+						$mdgriffith$elm_ui$Element$Border$color(
+						$author$project$Widget$Material$Color$fromColor(palette.on.primary)),
+						$mdgriffith$elm_ui$Element$transparent(!visible),
+						$mdgriffith$elm_ui$Element$height(
+						$mdgriffith$elm_ui$Element$px(7)),
+						$mdgriffith$elm_ui$Element$width(
+						$mdgriffith$elm_ui$Element$px(11)),
+						$mdgriffith$elm_ui$Element$rotate(
+						$elm$core$Basics$degrees(-45)),
+						$mdgriffith$elm_ui$Element$centerX,
+						$mdgriffith$elm_ui$Element$centerY,
+						$mdgriffith$elm_ui$Element$moveUp(2),
+						$mdgriffith$elm_ui$Element$Border$widthEach(
+						{bottom: 2, left: 2, right: 0, top: 0})
+					]),
+				$mdgriffith$elm_ui$Element$none));
+	};
+	return {
+		elementButton: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$width(
+				$mdgriffith$elm_ui$Element$px(16)),
+				$mdgriffith$elm_ui$Element$height(
+				$mdgriffith$elm_ui$Element$px(16)),
+				$mdgriffith$elm_ui$Element$Border$rounded(2),
+				$mdgriffith$elm_ui$Element$Border$width(2),
+				$mdgriffith$elm_ui$Element$focused(
+				A3(rounded, true, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.on.surface))
+			]),
+		ifDisabled: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.on.surface))),
+				check(false)
+			]),
+		ifDisabledSelected: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.on.surface))),
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(
+					A2($author$project$Widget$Material$Color$scaleOpacity, $author$project$Widget$Material$Color$buttonDisabledOpacity, palette.on.surface))),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				A3(rounded, false, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.on.surface)),
+				$mdgriffith$elm_ui$Element$focused(
+				A3(rounded, false, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.on.surface)),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				A3(rounded, false, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.on.surface)),
+				check(true)
+			]),
+		ifSelected: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(palette.primary)),
+				$mdgriffith$elm_ui$Element$Background$color(
+				$author$project$Widget$Material$Color$fromColor(palette.primary)),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				A3(rounded, false, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.primary)),
+				$mdgriffith$elm_ui$Element$focused(
+				A3(rounded, false, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.primary)),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				A3(rounded, false, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.primary)),
+				check(true)
+			]),
+		otherwise: _List_fromArray(
+			[
+				$mdgriffith$elm_ui$Element$Border$color(
+				$author$project$Widget$Material$Color$fromColor(
+					$author$project$Internal$Material$Palette$gray(palette))),
+				$mdgriffith$elm_ui$Element$mouseDown(
+				A3(rounded, true, $author$project$Widget$Material$Color$buttonPressedOpacity, palette.on.surface)),
+				$mdgriffith$elm_ui$Element$focused(
+				A3(rounded, true, $author$project$Widget$Material$Color$buttonFocusOpacity, palette.on.surface)),
+				$mdgriffith$elm_ui$Element$mouseOver(
+				A3(rounded, true, $author$project$Widget$Material$Color$buttonHoverOpacity, palette.on.surface)),
+				check(false)
+			])
+	};
+};
+var $author$project$Widget$Material$checkbox = $author$project$Internal$Material$Checkbox$checkbox;
+var $author$project$Internal$Checkbox$checkbox = F2(
+	function (style, _v0) {
+		var onChange = _v0.onChange;
+		var description = _v0.description;
+		var checked = _v0.checked;
+		return A2(
+			$mdgriffith$elm_ui$Element$Input$button,
+			A2(
+				$elm$core$List$cons,
+				$mdgriffith$elm_ui$Element$htmlAttribute(
+					A2(
+						$elm$html$Html$Attributes$attribute,
+						'aria-checked',
+						checked ? 'true' : 'false')),
+				A2(
+					$elm$core$List$cons,
+					$mdgriffith$elm_ui$Element$htmlAttribute(
+						A2($elm$html$Html$Attributes$attribute, 'role', 'checkbox')),
+					_Utils_ap(
+						style.elementButton,
+						_Utils_ap(
+							function () {
+								var _v1 = _Utils_Tuple2(
+									_Utils_eq(onChange, $elm$core$Maybe$Nothing),
+									checked);
+								if (_v1.a) {
+									if (_v1.b) {
+										return style.ifDisabledSelected;
+									} else {
+										return style.ifDisabled;
+									}
+								} else {
+									if (_v1.b) {
+										return style.ifSelected;
+									} else {
+										return style.otherwise;
+									}
+								}
+							}(),
+							_List_fromArray(
+								[
+									$mdgriffith$elm_ui$Element$Region$description(description)
+								]))))),
+			{
+				label: $mdgriffith$elm_ui$Element$none,
+				onPress: A2(
+					$elm$core$Maybe$map,
+					function (tomsg) {
+						return tomsg(!checked);
+					},
+					onChange)
+			});
+	});
+var $author$project$Widget$checkbox = function () {
+	var fun = $author$project$Internal$Checkbox$checkbox;
+	return fun;
+}();
+var $author$project$Page$Checkbox$viewFunctions = function () {
+	var viewCheckbox = F6(
+		function (style, desc, selected, onPress, _v0, _v1) {
+			var palette = _v0.palette;
+			return A2(
+				$author$project$Page$viewTile,
+				'Widget.checkbox',
+				A2(
+					$author$project$Widget$checkbox,
+					style(palette),
+					{checked: selected, description: desc, onChange: onPress}));
+		});
+	return A3(
+		$elm$core$List$foldl,
+		$author$project$UIExplorer$Story$addTile,
+		$author$project$UIExplorer$Story$initStaticTiles,
+		_List_fromArray(
+			[viewCheckbox]));
+}();
+var $author$project$Page$Checkbox$book = $author$project$UIExplorer$Story$build(
+	A2(
+		$author$project$UIExplorer$Story$addStory,
+		A3(
+			$author$project$UIExplorer$Story$boolStory,
+			'with event handler',
+			_Utils_Tuple2(
+				$elm$core$Maybe$Just(
+					$elm$core$Basics$always(_Utils_Tuple0)),
+				$elm$core$Maybe$Nothing),
+			true),
+		A2(
+			$author$project$UIExplorer$Story$addStory,
+			A3(
+				$author$project$UIExplorer$Story$boolStory,
+				'Selected',
+				_Utils_Tuple2(true, false),
+				true),
+			A2(
+				$author$project$UIExplorer$Story$addStory,
+				A2($author$project$UIExplorer$Story$textStory, 'Description', 'Be Awesome'),
+				A2(
+					$author$project$UIExplorer$Story$addStory,
+					A3(
+						$author$project$UIExplorer$Story$optionListStory,
+						'Style',
+						_Utils_Tuple2('Checkbox', $author$project$Widget$Material$checkbox),
+						_List_Nil),
+					A2(
+						$author$project$UIExplorer$Story$book,
+						$elm$core$Maybe$Just('Options'),
+						$author$project$Page$Checkbox$viewFunctions))))));
+var $author$project$Page$Checkbox$IsButtonEnabled = function (a) {
+	return {$: 'IsButtonEnabled', a: a};
+};
+var $author$project$Page$Checkbox$init = _Utils_Tuple2(
+	$author$project$Page$Checkbox$IsButtonEnabled(false),
+	$elm$core$Platform$Cmd$none);
+var $author$project$Page$Checkbox$subscriptions = function (_v0) {
+	return $elm$core$Platform$Sub$none;
+};
+var $author$project$Page$Checkbox$update = F2(
+	function (msg, _v0) {
+		var buttonEnabled = _v0.a;
+		return _Utils_Tuple2(
+			$author$project$Page$Checkbox$IsButtonEnabled(!buttonEnabled),
+			$elm$core$Platform$Cmd$none);
+	});
+var $author$project$Page$Checkbox$ToggledButtonStatus = {$: 'ToggledButtonStatus'};
+var $author$project$Page$Checkbox$view = F2(
+	function (_v0, _v1) {
+		var palette = _v0.palette;
+		var isButtonEnabled = _v1.a;
+		return A2(
+			$author$project$Widget$checkbox,
+			$author$project$Widget$Material$checkbox(palette),
+			{
+				checked: isButtonEnabled,
+				description: 'click me',
+				onChange: $elm$core$Maybe$Just(
+					$elm$core$Basics$always($author$project$Page$Checkbox$ToggledButtonStatus))
+			});
+	});
+var $author$project$Page$Checkbox$demo = {
+	init: $elm$core$Basics$always($author$project$Page$Checkbox$init),
+	subscriptions: $author$project$Page$Checkbox$subscriptions,
+	update: $author$project$Page$Checkbox$update,
+	view: $author$project$Page$demo($author$project$Page$Checkbox$view)
+};
+var $author$project$Page$Checkbox$description = 'Checkboxes toggle the state of a single item on or off.';
+var $author$project$Page$Checkbox$title = 'Checkbox';
+var $author$project$Page$Checkbox$page = $author$project$Page$create(
+	{book: $author$project$Page$Checkbox$book, demo: $author$project$Page$Checkbox$demo, description: $author$project$Page$Checkbox$description, title: $author$project$Page$Checkbox$title});
 var $author$project$Page$Dialog$viewFunctions = function () {
 	var viewDialog = F7(
 		function (style, text, titleString, accept, dismiss, _v0, _v1) {
@@ -27786,13 +28069,17 @@ var $author$project$Main$pages = A3(
 														$author$project$Page$Switch$page,
 														A3(
 															$author$project$UIExplorer$nextPage,
-															'Multi Select',
-															$author$project$Page$MultiSelect$page,
+															'Checkbox',
+															$author$project$Page$Checkbox$page,
 															A3(
 																$author$project$UIExplorer$nextPage,
-																'Select',
-																$author$project$Page$Select$page,
-																A2($author$project$UIExplorer$firstPage, 'Button', $author$project$Page$Button$page)))))))))))))))));
+																'Multi Select',
+																$author$project$Page$MultiSelect$page,
+																A3(
+																	$author$project$UIExplorer$nextPage,
+																	'Select',
+																	$author$project$Page$Select$page,
+																	A2($author$project$UIExplorer$firstPage, 'Button', $author$project$Page$Button$page))))))))))))))))));
 var $elm$json$Json$Decode$value = _Json_decodeValue;
 var $author$project$Main$main = A2($author$project$UIExplorer$application, $author$project$Main$config, $author$project$Main$pages);
 _Platform_export({'Main':{'init':$author$project$Main$main($elm$json$Json$Decode$value)(0)}});}(this));

explorer/src/Main.elm

@@ -4,6 +4,7 @@ import Element
 import Json.Decode as Decode exposing (Decoder)
 import Page.AppBar
 import Page.Button
+import Page.Checkbox
 import Page.Dialog
 import Page.Icon
 import Page.Item
@@ -26,6 +27,7 @@ pages =
     UIExplorer.firstPage "Button" Page.Button.page
         |> UIExplorer.nextPage "Select" Page.Select.page
         |> UIExplorer.nextPage "Multi Select" Page.MultiSelect.page
+        |> UIExplorer.nextPage "Checkbox" Page.Checkbox.page
         |> UIExplorer.nextPage "Switch" Page.Switch.page
         |> UIExplorer.nextPage "Radio" Page.Radio.page
         |> UIExplorer.nextPage "Tab" Page.Tab.page

explorer/src/Page/Checkbox.elm

@@ -0,0 +1,152 @@
+module Page.Checkbox exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
+
+import Element exposing (Element)
+import Material.Icons.Types exposing (Coloring(..))
+import Page
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
+import Widget
+import Widget.Material as Material
+
+
+{-| The title of this page
+-}
+title : String
+title =
+    "Checkbox"
+
+
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Checkboxes toggle the state of a single item on or off."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewCheckbox style desc selected onPress { palette } () =
+            Widget.checkbox (style palette)
+                { description = desc
+                , checked = selected
+                , onChange = onPress
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.checkbox"
+    in
+    [ viewCheckbox ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) flags
+book =
+    Story.book (Just "Options")
+        viewFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "Checkbox", Material.checkbox )
+                []
+            )
+        --Changing the text of the label
+        |> Story.addStory
+            (Story.textStory "Description"
+                "Be Awesome"
+            )
+        --Change the Icon
+        |> Story.addStory
+            (Story.boolStory "Selected"
+                ( True
+                , False
+                )
+                True
+            )
+        --Should an event be triggered when pressing the button?
+        |> Story.addStory
+            (Story.boolStory "with event handler"
+                ( Just (always ()), Nothing )
+                True
+            )
+        |> Story.build
+
+
+
+{- This next section is essentially just a normal Elm program. -}
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+
+
+type Model
+    = IsButtonEnabled Bool
+
+
+type Msg
+    = ToggledButtonStatus
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( IsButtonEnabled False
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg (IsButtonEnabled buttonEnabled) =
+    case msg of
+        ToggledButtonStatus ->
+            ( IsButtonEnabled <| not buttonEnabled
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
+-}
+view : Context -> Model -> Element Msg
+view { palette } (IsButtonEnabled isButtonEnabled) =
+    Widget.checkbox (Material.checkbox palette)
+        { description = "click me"
+        , checked = isButtonEnabled
+        , onChange =
+            always ToggledButtonStatus
+                |> Just
+        }
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANYTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+demo : Tile Model Msg flags
+demo =
+    { init = always init
+    , update = update
+    , view = Page.demo view
+    , subscriptions = subscriptions
+    }
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }

src/Internal/Checkbox.elm

@@ -0,0 +1,57 @@
+module Internal.Checkbox exposing (Checkbox, CheckboxStyle, checkbox)
+
+import Element exposing (Attribute, Element)
+import Element.Input as Input
+import Element.Region as Region
+import Html.Attributes
+
+
+type alias CheckboxStyle msg =
+    { elementButton : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , ifSelected : List (Attribute msg)
+    , ifDisabledSelected : List (Attribute msg)
+    , otherwise : List (Attribute msg)
+    }
+
+
+type alias Checkbox msg =
+    { description : String
+    , onChange : Maybe (Bool -> msg)
+    , checked : Bool
+    }
+
+
+checkbox : CheckboxStyle msg -> Checkbox msg -> Element msg
+checkbox style { onChange, description, checked } =
+    Input.button
+        (Element.htmlAttribute
+            (Html.Attributes.attribute "aria-checked" <|
+                if checked then
+                    "true"
+
+                else
+                    "false"
+            )
+            :: Element.htmlAttribute
+                (Html.Attributes.attribute "role" "checkbox")
+            :: style.elementButton
+            ++ (case ( onChange == Nothing, checked ) of
+                    ( True, True ) ->
+                        style.ifDisabledSelected
+
+                    ( True, False ) ->
+                        style.ifDisabled
+
+                    ( False, True ) ->
+                        style.ifSelected
+
+                    ( False, False ) ->
+                        style.otherwise
+               )
+            ++ [ Region.description description
+               ]
+        )
+        { onPress = onChange |> Maybe.map (\tomsg -> tomsg <| not checked)
+        , label = Element.none
+        }

src/Internal/Material/Checkbox.elm

@@ -0,0 +1,100 @@
+module Internal.Material.Checkbox exposing (checkbox)
+
+import Color
+import Element exposing (Attribute, Decoration)
+import Element.Background as Background
+import Element.Border as Border
+import Internal.Checkbox exposing (CheckboxStyle)
+import Internal.Material.Palette as Palette exposing (Palette)
+import Svg exposing (Svg, g, line, polygon, polyline, rect, svg, text, use)
+import Svg.Attributes as A exposing (baseProfile, clipRule, cx, cy, d, enableBackground, fill, fillOpacity, fillRule, id, overflow, points, r, x1, x2, xlinkHref, y1, y2)
+import Widget.Material.Color as MaterialColor
+
+
+checkbox : Palette -> CheckboxStyle msg
+checkbox palette =
+    let
+        rounded : Bool -> Float -> Color.Color -> List Decoration
+        rounded bg opacity color =
+            let
+                scaledColor =
+                    MaterialColor.fromColor <|
+                        MaterialColor.scaleOpacity opacity color
+            in
+            Border.shadow
+                { offset = ( 0, 0 )
+                , size = 10
+                , blur = 0
+                , color = scaledColor
+                }
+                :: (if bg then
+                        [ Background.color scaledColor ]
+
+                    else
+                        []
+                   )
+
+        check visible =
+            Element.inFront
+                (Element.el
+                    [ Border.color <| MaterialColor.fromColor palette.on.primary
+                    , Element.transparent (not visible)
+                    , Element.height (Element.px 7)
+                    , Element.width (Element.px 11)
+                    , Element.rotate (degrees -45)
+                    , Element.centerX
+                    , Element.centerY
+                    , Element.moveUp 2
+                    , Border.widthEach
+                        { top = 0
+                        , left = 2
+                        , bottom = 2
+                        , right = 0
+                        }
+                    ]
+                    Element.none
+                )
+    in
+    { elementButton =
+        [ Element.width <| Element.px 16
+        , Element.height <| Element.px 16
+        , Border.rounded 2
+        , Border.width 2
+        , Element.focused <| rounded True MaterialColor.buttonHoverOpacity palette.on.surface
+        ]
+    , ifDisabled =
+        [ Border.color <|
+            MaterialColor.fromColor <|
+                MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity palette.on.surface
+        , check False
+        ]
+    , ifSelected =
+        [ Border.color <| MaterialColor.fromColor palette.primary
+        , Background.color <| MaterialColor.fromColor palette.primary
+        , Element.mouseDown <| rounded False MaterialColor.buttonPressedOpacity palette.primary
+        , Element.focused <| rounded False MaterialColor.buttonFocusOpacity palette.primary
+        , Element.mouseOver <| rounded False MaterialColor.buttonHoverOpacity palette.primary
+        , check True
+        ]
+    , ifDisabledSelected =
+        [ Border.color <|
+            MaterialColor.fromColor <|
+                MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity palette.on.surface
+        , Background.color <|
+            MaterialColor.fromColor <|
+                MaterialColor.scaleOpacity MaterialColor.buttonDisabledOpacity palette.on.surface
+        , Element.mouseDown <| rounded False MaterialColor.buttonPressedOpacity palette.on.surface
+        , Element.focused <| rounded False MaterialColor.buttonFocusOpacity palette.on.surface
+        , Element.mouseOver <| rounded False MaterialColor.buttonHoverOpacity palette.on.surface
+        , check True
+        ]
+    , otherwise =
+        [ Border.color <|
+            MaterialColor.fromColor <|
+                Palette.gray palette
+        , Element.mouseDown <| rounded True MaterialColor.buttonPressedOpacity palette.on.surface
+        , Element.focused <| rounded True MaterialColor.buttonFocusOpacity palette.on.surface
+        , Element.mouseOver <| rounded True MaterialColor.buttonHoverOpacity palette.on.surface
+        , check False
+        ]
+    }

src/Widget.elm

@@ -1,5 +1,6 @@
 module Widget exposing
     ( ButtonStyle, Button, TextButton, iconButton, textButton, button
+    , CheckboxStyle, Checkbox, checkbox
     , RadioStyle, Radio, radio
     , SwitchStyle, Switch, switch
     , Select, selectButton, select, toggleButton
@@ -58,6 +59,13 @@ You can create you own widgets by sticking widgets types together.
 @docs ButtonStyle, Button, TextButton, iconButton, textButton, button
 
 
+# Checkbox
+
+![Checkbox](https://orasund.github.io/elm-ui-widgets/assets/checkbox.png)
+
+@docs CheckboxStyle, Checkbox, checkbox
+
+
 # Radio
 
 ![Radio](https://orasund.github.io/elm-ui-widgets/assets/radio.png)
@@ -182,6 +190,7 @@ import Element exposing (Attribute, DeviceClass, Element, Length)
 import Element.Input exposing (Placeholder)
 import Internal.AppBar as AppBar
 import Internal.Button as Button
+import Internal.Checkbox as Checkbox
 import Internal.Dialog as Dialog
 import Internal.Item as Item
 import Internal.List as List
@@ -367,6 +376,60 @@ button =
 
 
 
+{----------------------------------------------------------
+- CHECKBOX
+----------------------------------------------------------}
+
+
+type alias CheckboxStyle msg =
+    { elementButton : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , ifSelected : List (Attribute msg)
+    , ifDisabledSelected : List (Attribute msg)
+    , otherwise : List (Attribute msg)
+    }
+
+
+type alias Checkbox msg =
+    { description : String
+    , onChange : Maybe (Bool -> msg)
+    , checked : Bool
+    }
+
+
+{-| A checkbox button
+
+    import Widget.Material as Material
+
+    type Msg
+        = Check Bool
+
+    checkbox (Material.checkbox Material.defaultPalette)
+        { description = "Dark Mode"
+        , onChange = Just Check
+        , checked = False
+        }
+        |> always "Ignore this line" --> "Ignore this line"
+
+-}
+checkbox :
+    CheckboxStyle msg
+    ->
+        { description : String
+        , onChange : Maybe (Bool -> msg)
+        , checked : Bool
+        }
+    -> Element msg
+checkbox =
+    let
+        fun : Checkbox.CheckboxStyle msg -> Checkbox.Checkbox msg -> Element msg
+        fun =
+            Checkbox.checkbox
+    in
+    fun
+
+
+
 {----------------------------------------------------------
 - RADIO
 ----------------------------------------------------------}

src/Widget/Material.elm

@@ -2,6 +2,7 @@ module Widget.Material exposing
     ( Palette, defaultPalette, darkPalette, swapColor, gray, lightGray, textGray
     , containedButton, outlinedButton, textButton
     , iconButton, toggleButton, toggleRow
+    , checkbox
     , switch
     , radio
     , cardColumn, cardAttributes
@@ -51,6 +52,11 @@ Different styles for buttons have different meanings.
 @docs iconButton, toggleButton, toggleRow
 
 
+# Checkbox
+
+@docs checkbox
+
+
 # Switch
 
 @docs switch
@@ -131,6 +137,7 @@ import Color exposing (Color)
 import Element exposing (Attribute)
 import Internal.AppBar exposing (AppBarStyle)
 import Internal.Button exposing (ButtonStyle)
+import Internal.Checkbox exposing (CheckboxStyle)
 import Internal.Dialog exposing (DialogStyle)
 import Internal.Item
     exposing
@@ -146,6 +153,7 @@ import Internal.Item
 import Internal.List exposing (ColumnStyle, RowStyle)
 import Internal.Material.AppBar as AppBar
 import Internal.Material.Button as Button
+import Internal.Material.Checkbox as Checkbox
 import Internal.Material.Chip as Chip
 import Internal.Material.Dialog as Dialog
 import Internal.Material.Item as Item
@@ -323,6 +331,22 @@ iconButton =
 
 
 
+--------------------------------------------------------------------------------
+-- Checkbox
+--------------------------------------------------------------------------------
+
+
+{-| A checkbox button
+
+![checkbox](https://orasund.github.io/elm-ui-widgets/assets/material/checkbox.png)
+
+-}
+checkbox : Palette -> CheckboxStyle msg
+checkbox =
+    Checkbox.checkbox
+
+
+
 --------------------------------------------------------------------------------
 -- Radio
 --------------------------------------------------------------------------------

tests/VerifyExamples/Widget/Checkbox0.elm

@@ -0,0 +1,34 @@
+module VerifyExamples.Widget.Checkbox0 exposing (..)
+
+-- This file got generated by [elm-verify-examples](https://github.com/stoeffel/elm-verify-examples).
+-- Please don't modify this file by hand!
+
+import Test
+import Expect
+
+import Widget exposing (..)
+import Widget.Material as Material
+
+type Msg
+    = Check Bool
+
+
+
+
+
+spec0 : Test.Test
+spec0 =
+    Test.test "#checkbox: \n\n    checkbox (Material.checkbox Material.defaultPalette)\n        { description = \"Dark Mode\"\n        , onChange = Just Check\n        , checked = False\n        }\n        |> always \"Ignore this line\"\n    --> \"Ignore this line\"" <|
+        \() ->
+            Expect.equal
+                (
+                checkbox (Material.checkbox Material.defaultPalette)
+                    { description = "Dark Mode"
+                    , onChange = Just Check
+                    , checked = False
+                    }
+                    |> always "Ignore this line"
+                )
+                (
+                "Ignore this line"
+                )