docs: add Form and Tabs examples (#1411)

docs/examples/tabs.md

@@ -0,0 +1,100 @@
+# Tabs (AlpineJS)
+
+_(By [@JuroOravec](https://github.com/JuroOravec) and [@mscheper](https://github.com/mscheper))_
+
+This example defines a tabs component. Tabs are dynamic - to change the currently
+opened tab, click on the tab headers.
+
+To get started, use the following example to create a simple container with 2 tabs:
+
+```django
+{% component "Tablist" id="my-tablist" name="My Tabs" %}
+    {% component "Tab" header="Tab 1" %}
+        This is the content of Tab 1
+    {% endcomponent %}
+    {% component "Tab" header="Tab 2" disabled=True %}
+        This is the content of Tab 2
+    {% endcomponent %}
+{% endcomponent %}
+```
+
+![Tabs example](./images/tabs.gif)
+
+## API
+
+The tab component is composed of two parts: `Tablist` and `Tab`. Here's how you can customize them.
+
+### `Tablist` component
+
+The `Tablist` component is the main container for the tabs. It accepts the following arguments:
+
+- **`id`** (optional): A unique ID for the tab list. If not provided, it's generated from the `name`.
+- **`name`**: The name of the tab list, used as a WAI-ARIA label for accessibility.
+- **`selected_tab`** (optional): The `id` of the tab that should be selected by default.
+- **`container_attrs`**, **`tablist_attrs`**, **`tab_attrs`**, **`tabpanel_attrs`** (optional): Dictionaries of HTML attributes to be added to the corresponding elements.
+
+Inside the `Tablist`'s default slot you will define the individual tabs.
+
+### `Tab` component
+
+The `Tab` component defines an individual tab. It MUST be nested inside a `Tablist`. It accepts the following arguments:
+
+- **`header`**: The text to be displayed in the tab's header.
+- **`disabled`** (optional): A boolean that disables the tab if `True`.
+- **`id`** (optional): A unique ID for the tab. If not provided, it's generated from the header.
+
+Use the `Tab`'s default slot to define the content of the tab.
+
+## Example
+
+To see the component in action, you can set up a view and a URL pattern as shown below.
+
+### `views.py`
+
+This example shows how to render a full page with the tab component.
+
+```djc_py
+--8<-- "sampleproject/examples/pages/tabs.py"
+```
+
+### `urls.py`
+
+```python
+from django.urls import path
+
+from examples.pages.tabs import TabsPage
+
+urlpatterns = [
+    path("examples/tabs", TabsPage.as_view(), name="tabs"),
+]
+```
+
+## How it works
+
+At the start of rendering, `Tablist` defines special context that `Tab`s recognize.
+
+When a `Tab` component is nested and rendered inside a `Tablist`, it registers itself with the parent `Tablist` component.
+
+After the rendering of `Tablist`'s body is done, we end up with list of rendered `Tabs` that were encountered.
+
+`Tablist` then uses this information to dynamically render the tab HTML.
+
+## Definition
+
+### `tabs.py`
+
+```djc_py
+--8<-- "sampleproject/examples/components/tabs/tabs.py"
+```
+
+### `tabs.html`
+
+```django
+--8<-- "sampleproject/examples/components/tabs/tabs.html"
+```
+
+### `tabs.css`
+
+```css
+--8<-- "sampleproject/examples/components/tabs/tabs.css"
+```