tabs widget (#2020)

* tabs widget

* click underline

* color tweak

* docs

* docs update

* expose Tab

* added remove_tab and clear

* fix cycling

* add animation

* docs

* changelog

* remove recompose

* docstrings

* Update docs/guide/actions.md

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Rodrigoed the tabs

* Update docs/widgets/tabs.md

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Update docs/widgets/tabs.md

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* copy

* docstrings

* docstring

* docstring

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* stop click

* docstring

* auto assign consistent IDs

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Document bindings

* document bindings

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

---------

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

docs/widgets/checkbox.md

@@ -29,7 +29,7 @@ The example below shows check boxes in various states.
 ## Reactive Attributes
 
 | Name    | Type   | Default | Description                |
-|---------|--------|---------|----------------------------|
+| ------- | ------ | ------- | -------------------------- |
 | `value` | `bool` | `False` | The value of the checkbox. |
 
 ## Bindings

docs/widgets/input.md

@@ -38,7 +38,7 @@ The example below shows how you might create a simple form using two `Input` wid
 
 ## Bindings
 
-The input widget defines directly the following bindings:
+The Input widget defines the following bindings:
 
 ::: textual.widgets.Input.BINDINGS
     options:

docs/widgets/tabs.md

@@ -0,0 +1,75 @@
+# Tabs
+
+Displays a number of tab headers which may be activated with a click or navigated with cursor keys.
+
+- [x] Focusable
+- [ ] Container
+
+Construct a `Tabs` widget with strings or [Text][rich.text.Text] objects as positional arguments, which will set the labels in the tabs. Here's an example with three tabs:
+
+```python
+def compose(self) -> ComposeResult:
+    yield Tabs("First tab", "Second tab", Text.from_markup("[u]Third[/u] tab"))
+```
+
+This will create [Tab][textual.widgets.Tab] widgets internally, with auto-incrementing `id` attributes (`"tab-1"`, `"tab-2"` etc).
+You can also supply `Tab` objects directly in the constructor, which will allow you to explicitly set an `id`. Here's an example:
+
+```python
+def compose(self) -> ComposeResult:
+    yield Tabs(
+        Tab("First tab", id="one"),
+        Tab("Second tab", id="two"),
+    )
+```
+
+When the user switches to a tab by clicking or pressing keys, then `Tabs` will send a [Tabs.TabActivated][textual.widgets.Tabs.TabActivated] message which contains the `tab` that was activated.
+You can then use `event.tab.id` attribute to perform any related actions.
+
+## Clearing tabs
+
+Clear tabs by calling the [clear][textual.widgets.Tabs.clear] method. Clearing the tabs will send a [Tabs.TabActivated][textual.widgets.Tabs.TabActivated] message with the `tab` attribute set to `None`.
+
+## Adding tabs
+
+Tabs may be added dynamically with the [add_tab][textual.widgets.Tabs.add_tab] method, which accepts strings, [Text][rich.text.Text], or [Tab][textual.widgets.Tab] objects.
+
+## Example
+
+The following example adds a `Tabs` widget above a text label. Press ++a++ to add a tab, ++c++ to clear the tabs.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/tabs.py" press="a,a,a,a,right,right"}
+    ```
+
+=== "tabs.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/tabs.py"
+    ```
+
+
+## Reactive Attributes
+
+| Name     | Type  | Default | Description                                                                        |
+| -------- | ----- | ------- | ---------------------------------------------------------------------------------- |
+| `active` | `str` | `""`    | The ID of the active tab. Set this attribute to a tab ID to change the active tab. |
+
+
+## Messages
+
+### ::: textual.widgets.Tabs.TabActivated
+
+## Bindings
+
+The Tabs widget defines the following bindings:
+
+::: textual.widgets.Tabs.BINDINGS
+    options:
+      show_root_heading: false
+      show_root_toc_entry: false
+
+## See Also
+
+- [Tabs](../api/tabs.md) code reference