Textualize · davep · Feb 27, 2023 · Feb 15, 2023 · Feb 16, 2023 · Feb 16, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Unreleased
 
+### Added
+
+- Added `Checkbox` https://github.com/Textualize/textual/pull/1872
+- Added `RadioButton` https://github.com/Textualize/textual/pull/1872
+- Added `RadioSet` https://github.com/Textualize/textual/pull/1872
+
 ### Fixed
 
 - Fix exceptions in watch methods being hidden on startup https://github.com/Textualize/textual/issues/1886

diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
@@ -0,0 +1 @@
+::: textual.widgets.Checkbox
diff --git a/docs/api/radiobutton.md b/docs/api/radiobutton.md
@@ -0,0 +1 @@
+::: textual.widgets.RadioButton
diff --git a/docs/api/radioset.md b/docs/api/radioset.md
@@ -0,0 +1 @@
+::: textual.widgets.RadioSet
diff --git a/docs/api/toggle_button.md b/docs/api/toggle_button.md
@@ -0,0 +1 @@
+::: textual.widgets._toggle_button.ToggleButton
diff --git a/docs/examples/widgets/checkbox.css b/docs/examples/widgets/checkbox.css
@@ -0,0 +1,11 @@
+Screen {
+    align: center middle;
+}
+
+Vertical {
+    width: auto;
+    height: auto;
+    border: solid $primary;
+    background: $panel;
+    padding: 2;
+}
diff --git a/docs/examples/widgets/checkbox.py b/docs/examples/widgets/checkbox.py
@@ -0,0 +1,25 @@
+from textual.app import App, ComposeResult
+from textual.containers import Vertical
+from textual.widgets import Checkbox
+
+
+class CheckboxApp(App[None]):
+    CSS_PATH = "checkbox.css"
+
+    def compose(self) -> ComposeResult:
+        with Vertical():
+            yield Checkbox("Arrakis :sweat:")
+            yield Checkbox("Caladan")
+            yield Checkbox("Chusuk")
+            yield Checkbox("[b]Giedi Prime[/b]")
+            yield Checkbox("[magenta]Ginaz[/]")
+            yield Checkbox("Grumman", True)
+            yield Checkbox("Kaitain", id="initial_focus")
+            yield Checkbox("Novebruns", True)
+
+    def on_mount(self):
+        self.query_one("#initial_focus", Checkbox).focus()
+
+
+if __name__ == "__main__":
+    CheckboxApp().run()
diff --git a/docs/examples/widgets/radio_button.css b/docs/examples/widgets/radio_button.css
@@ -0,0 +1,7 @@
+Screen {
+    align: center middle;
+}
+
+RadioSet {
+    width: 50%;
+}
diff --git a/docs/examples/widgets/radio_button.py b/docs/examples/widgets/radio_button.py
@@ -0,0 +1,27 @@
+from textual.app import App, ComposeResult
+from textual.widgets import RadioButton, RadioSet
+
+
+class RadioChoicesApp(App[None]):
+    CSS_PATH = "radio_button.css"
+
+    def compose(self) -> ComposeResult:
+        with RadioSet():
+            yield RadioButton("Battlestar Galactica")
+            yield RadioButton("Dune 1984")
+            yield RadioButton("Dune 2021", id="focus_me")
+            yield RadioButton("Serenity", value=True)
+            yield RadioButton("Star Trek: The Motion Picture")
+            yield RadioButton("Star Wars: A New Hope")
+            yield RadioButton("The Last Starfighter")
+            yield RadioButton(
+                "Total Recall :backhand_index_pointing_right: :red_circle:"
+            )
+            yield RadioButton("Wing Commander")
+
+    def on_mount(self) -> None:
+        self.query_one("#focus_me", RadioButton).focus()
+
+
+if __name__ == "__main__":
+    RadioChoicesApp().run()
diff --git a/docs/examples/widgets/radio_set.css b/docs/examples/widgets/radio_set.css
@@ -0,0 +1,12 @@
+Screen {
+    align: center middle;
+}
+
+Horizontal {
+    align: center middle;
+    height: auto;
+}
+
+RadioSet {
+    width: 45%;
+}
diff --git a/docs/examples/widgets/radio_set.py b/docs/examples/widgets/radio_set.py
@@ -0,0 +1,43 @@
+from textual.app import App, ComposeResult
+from textual.containers import Horizontal
+from textual.widgets import RadioButton, RadioSet
+
+
+class RadioChoicesApp(App[None]):
+    CSS_PATH = "radio_set.css"
+
+    def compose(self) -> ComposeResult:
+        with Horizontal():
+            # A RadioSet built up from RadioButtons.
+            with RadioSet():
+                yield RadioButton("Battlestar Galactica")
+                yield RadioButton("Dune 1984")
+                yield RadioButton("Dune 2021")
+                yield RadioButton("Serenity", value=True)
+                yield RadioButton("Star Trek: The Motion Picture")
+                yield RadioButton("Star Wars: A New Hope")
+                yield RadioButton("The Last Starfighter")
+                yield RadioButton(
+                    "Total Recall :backhand_index_pointing_right: :red_circle:",
+                    id="focus_me",
+                )
+                yield RadioButton("Wing Commander")
+            # A RadioSet built up from a collection of strings.
+            yield RadioSet(
+                "Amanda",
+                "Connor MacLeod",
+                "Duncan MacLeod",
+                "Heather MacLeod",
+                "Joe Dawson",
+                "Kurgan, [bold italic red]The[/]",
+                "Methos",
+                "Rachel Ellenstein",
+                "Ramírez",
+            )
+
+    def on_mount(self) -> None:
+        self.query_one("#focus_me", RadioButton).focus()
+
+
+if __name__ == "__main__":
+    RadioChoicesApp().run()
diff --git a/docs/roadmap.md b/docs/roadmap.md
@@ -40,7 +40,7 @@ Widgets are key to making user-friendly interfaces. The builtin widgets should c
 - [x] Buttons
     * [x] Error / warning variants
 - [ ] Color picker
-- [ ] Checkbox
+- [X] Checkbox
 - [ ] Content switcher
 - [x] DataTable
     * [x] Cell select
@@ -70,7 +70,7 @@ Widgets are key to making user-friendly interfaces. The builtin widgets should c
     * [ ] Candlestick chars
 - [ ] Progress bars
     * [ ] Style variants (solid, thin etc)
-- [ ] Radio boxes
+- [X] Radio boxes
 - [ ] Spark-lines
 - [X] Switch
 - [ ] Tabs

diff --git a/docs/widgets/checkbox.md b/docs/widgets/checkbox.md
@@ -0,0 +1,59 @@
+# Checkbox
+
+A simple checkbox width which stores a boolean value.
+
+- [x] Focusable
+- [ ] Container
+
+## Example
+
+The example below shows check boxes in various states.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/checkbox.py"}
+    ```
+
+=== "checkbox.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/checkbox.py"
+    ```
+
+=== "checkbox.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/checkbox.css"
+    ```
+
+## Reactive Attributes
+
+| Name    | Type   | Default | Description                |
+|---------|--------|---------|----------------------------|
+| `value` | `bool` | `False` | The value of the checkbox. |
+
+## Bindings
+
+The checkbox widget defines directly the following bindings:
+
+::: textual.widgets._toggle_button.ToggleButton.BINDINGS
+    options:
+      show_root_heading: false
+      show_root_toc_entry: false
+
+## Component Classes
+
+The checkbox widget provides the following component classes:
+
+::: textual.widgets._toggle_button.ToggleButton.COMPONENT_CLASSES
+    options:
+      show_root_heading: false
+      show_root_toc_entry: false
+
+## Messages
+
+### ::: textual.widgets.Checkbox.Changed
+
+## See Also
+
+- [Checkbox](../api/checkbox.md) code reference
diff --git a/docs/widgets/radiobutton.md b/docs/widgets/radiobutton.md
@@ -0,0 +1,62 @@
+# RadioButton
+
+A simple radio button which stores a boolean value.
+
+- [x] Focusable
+- [ ] Container
+
+A radio button is best used with others inside a [`RadioSet`](./radioset.md).
+
+## Example
+
+The example below shows radio buttons, used within a [`RadioSet`](./radioset.md).
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/radio_button.py"}
+    ```
+
+=== "radio_button.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/radio_button.py"
+    ```
+
+=== "radio_button.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/radio_button.css"
+    ```
+
+## Reactive Attributes
+
+| Name    | Type   | Default | Description                    |
+|---------|--------|---------|--------------------------------|
+| `value` | `bool` | `False` | The value of the radio button. |
+
+## Bindings
+
+The radio button widget defines directly the following bindings:
+
+::: textual.widgets._toggle_button.ToggleButton.BINDINGS
+    options:
+      show_root_heading: false
+      show_root_toc_entry: false
+
+## Component Classes
+
+The radio button widget provides the following component classes:
+
+::: textual.widgets._toggle_button.ToggleButton.COMPONENT_CLASSES
+    options:
+      show_root_heading: false
+      show_root_toc_entry: false
+
+## Messages
+
+### ::: textual.widgets.RadioButton.Changed
+
+## See Also
+
+- [RadioButton](../api/radiobutton.md) code reference
+- [RadioSet](./radioset.md)
diff --git a/docs/widgets/radioset.md b/docs/widgets/radioset.md
@@ -0,0 +1,37 @@
+# RadioSet
+
+A container widget that groups [`RadioButton`](./radiobutton.md)s together.
+
+- [ ] Focusable
+- [x] Container
+
+## Example
+
+The example below shows two radio sets, one built using a collection of
+[radio buttons](./radiobutton.md), the other a collection of simple strings.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/radio_set.py"}
+    ```
+
+=== "radio_set.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/radio_set.py"
+    ```
+
+=== "radio_set.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/radio_set.css"
+    ```
+
+## Messages
+
+### ::: textual.widgets.RadioSet.Changed
+
+## See Also
+
+- [RadioSet](../api/radioset.md) code reference
+- [RadioButton](./radiobutton.md)
diff --git a/mkdocs-nav.yml b/mkdocs-nav.yml
@@ -121,6 +121,7 @@ nav:
       - "styles/width.md"
     - Widgets:
       - "widgets/button.md"
+      - "widgets/checkbox.md"
       - "widgets/data_table.md"
       - "widgets/directory_tree.md"
       - "widgets/footer.md"
@@ -133,6 +134,8 @@ nav:
       - "widgets/markdown_viewer.md"
       - "widgets/markdown.md"
       - "widgets/placeholder.md"
+      - "widgets/radiobutton.md"
+      - "widgets/radioset.md"
       - "widgets/static.md"
       - "widgets/switch.md"
       - "widgets/text_log.md"
@@ -141,6 +144,7 @@ nav:
     - "api/app.md"
     - "api/binding.md"
     - "api/button.md"
+    - "api/checkbox.md"
     - "api/color.md"
     - "api/containers.md"
     - "api/coordinate.md"
@@ -163,13 +167,16 @@ nav:
     - "api/pilot.md"
     - "api/placeholder.md"
     - "api/query.md"
+    - "api/radiobutton.md"
+    - "api/radioset.md"
     - "api/reactive.md"
     - "api/screen.md"
     - "api/scroll_view.md"
     - "api/static.md"
     - "api/strip.md"
     - "api/switch.md"
     - "api/text_log.md"
+    - "api/toggle_button.md"
     - "api/timer.md"
     - "api/tree_node.md"
     - "api/tree.md"

diff --git a/src/textual/app.py b/src/textual/app.py
@@ -428,6 +428,7 @@ def __init__(
         self._dom_ready = False
         self._batch_count = 0
         self.set_class(self.dark, "-dark-mode")
+        self.set_class(not self.dark, "-light-mode")
 
     @property
     def return_value(self) -> ReturnType | None:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		::: textual.widgets._toggle_button.ToggleButton