diff --git a/docs/10_Description.md b/docs/10_Description.md
index 9523889e9b319fe1f109de2b8efab2ff53dfb282..5d1183f8c8c703a79db7303e4d5b85354666600e 100644
--- a/docs/10_Description.md
+++ b/docs/10_Description.md
@@ -18,7 +18,7 @@ The AdminLTE renderer is a PHP class offers several methods to render
* buttons
* ...
-The class is compatible to PHP 7.3 to PHP 8.2
+The class is compatible to PHP 7+8 ... up to PHP 8.2.
## Screenshots
diff --git a/docs/30_Page_layout.md b/docs/30_Page/10_Page_layout.md
similarity index 100%
rename from docs/30_Page_layout.md
rename to docs/30_Page/10_Page_layout.md
diff --git a/docs/40_Navigation.md b/docs/30_Page/20_Navigation.md
similarity index 100%
rename from docs/40_Navigation.md
rename to docs/30_Page/20_Navigation.md
diff --git a/docs/60_Components/10_Grid.md b/docs/30_Page/30_Grid.md
similarity index 99%
rename from docs/60_Components/10_Grid.md
rename to docs/30_Page/30_Grid.md
index e295426c0fc66d47e0046fe13623c2a6a4099dfe..b556c8714d70a547a900552b43b69de404ad3fb6 100644
--- a/docs/60_Components/10_Grid.md
+++ b/docs/30_Page/30_Grid.md
@@ -54,7 +54,7 @@ $renderAdminLTE->addCol([HTML code], [Width]);
* [HTML code] - {string} Html code of the visible content
* [Width] - {integer} number of column width; values: 1..12
-### Example
+## Example
You can define a width of 1..12 to define a screen width of your cell.
diff --git a/docs/30_Page/_index.md b/docs/30_Page/_index.md
new file mode 100644
index 0000000000000000000000000000000000000000..dba9a22a5a4095f8e1559e771cf6ce5e7d5e6ac3
--- /dev/null
+++ b/docs/30_Page/_index.md
@@ -0,0 +1,7 @@
+<html>
+<div class="hero">
+
+ <h2>AdminLTE 3 :: Page</h2>
+
+</div>
+</html>
diff --git a/docs/60_Components/Alert.md b/docs/40_Components/Alert.md
similarity index 100%
rename from docs/60_Components/Alert.md
rename to docs/40_Components/Alert.md
diff --git a/docs/60_Components/Badge.md b/docs/40_Components/Badge.md
similarity index 100%
rename from docs/60_Components/Badge.md
rename to docs/40_Components/Badge.md
diff --git a/docs/60_Components/Button.md b/docs/40_Components/Button.md
similarity index 100%
rename from docs/60_Components/Button.md
rename to docs/40_Components/Button.md
diff --git a/docs/60_Components/Callout.md b/docs/40_Components/Callout.md
similarity index 100%
rename from docs/60_Components/Callout.md
rename to docs/40_Components/Callout.md
diff --git a/docs/60_Components/Card.md b/docs/40_Components/Card.md
similarity index 100%
rename from docs/60_Components/Card.md
rename to docs/40_Components/Card.md
diff --git a/docs/60_Components/Infobox.md b/docs/40_Components/Infobox.md
similarity index 100%
rename from docs/60_Components/Infobox.md
rename to docs/40_Components/Infobox.md
diff --git a/docs/60_Components/Smallbox.md b/docs/40_Components/Smallbox.md
similarity index 100%
rename from docs/60_Components/Smallbox.md
rename to docs/40_Components/Smallbox.md
diff --git a/docs/60_Components/_index.md b/docs/40_Components/_index.md
similarity index 100%
rename from docs/60_Components/_index.md
rename to docs/40_Components/_index.md
diff --git a/docs/50_Forms/Input.md b/docs/50_Forms/Input.md
new file mode 100644
index 0000000000000000000000000000000000000000..90dc83d57e3f3b152c8021acaec16d16954a0c5a
--- /dev/null
+++ b/docs/50_Forms/Input.md
@@ -0,0 +1,93 @@
+## Input
+
+Draw an input field and a label with horizontal direction.
+
+
+
+### Syntax
+
+```php
+$renderAdminLTE->getFormInput($aOptions);
+```
+
+### Return
+
+{string} html code
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Styling:
+
+Key | Description
+--- | ---
+class | optional: additional css classes
+append | optional: content on input start
+prepend | optional: content on input end
+type | field type: text, email, password, hidden and all other html 5 input types
+
+Content:
+
+Key | Description
+--- | ---
+label | label in front of the input element
+name | name attribute for sending form data
+value | value of the input field/ visible text; for checkbox and radio: the data to send when sending a form
+
+### Example
+
+#### Simple text input field
+
+```php
+$renderAdminLTE->getFormInput(array (
+ 'label' => 'Enter firstname',
+ 'type' => 'text',
+ 'name' => 'firstname',
+ 'value' => '',
+));
+```
+
+You get a label, an input field wrapped in a ``<div class="form-group row">``.
+
+```html
+<div class="form-group row">
+ <label for="firstname-27ece2891a0275dd604732b681fc666f" class="col-sm-2 col-form-label">
+ Enter firstname
+ </label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control myclass" name="firstname" value="" id="firstname-27ece2891a0275dd604732b681fc666f"/>
+ </div>
+</div>
+```
+
+#### Text input with append/ prepend
+
+With using append and prepend keys you can create gray boxes on left and right. Add a character, an icon or html code for the addon content.
+
+
+
+#### Radio and checkboxes
+
+For these input types you can use multiple elements.
+You must wrap a bunch of input elements into ``<div class="form-group row">`` "manually".
+
+
+
+```php
+echo '<div class="form-group">'
+ . $renderAdminLTE->getFormInput([
+ 'type' => 'checkbox',
+ 'label' => 'first option',
+ 'name' => 'first',
+ 'value' => 'yes',
+ ])
+ . $renderAdminLTE->getFormInput([
+ 'type' => 'checkbox',
+ 'label' => 'second option',
+ 'name' => 'second',
+ 'value' => 'yes',
+ ])
+ .'</div>'
+ ;
+```
diff --git a/docs/50_Forms/Textarea.md b/docs/50_Forms/Textarea.md
new file mode 100644
index 0000000000000000000000000000000000000000..40ba11908b758f73e0b3048c93a6b1616a282859
--- /dev/null
+++ b/docs/50_Forms/Textarea.md
@@ -0,0 +1,95 @@
+## Textarea
+
+Draw an textarea or html editor form.
+
+
+
+### Syntax
+
+```php
+$renderAdminLTE->getFormTextarea($aOptions);
+```
+
+### Return
+
+{string} html code
+
+### Parameters
+
+* $aOptions - {array} options to describe the element
+
+Styling:
+
+Key | Description
+--- | ---
+class | optional: additional css classes
+type | field type; one of<br>-[empty] (=default; a classic html textarea)<br>- "html" show html editor
+
+Content:
+
+Key | Description
+--- | ---
+label | label in front of the Textarea element
+name | name attribute for sending form data
+value | value of the textarea; visible text
+
+### Example
+
+#### Simple textarea
+
+You get a label and a textare wrapped in a ``<div class="form-group row">``.
+
+```php
+$renderAdminLTE->getFormTextarea(array (
+ 'label' => 'Enter text',
+ 'name' => 'textdata',
+ 'value' => 'Here is some text...',
+));
+```
+
+#### Html editor
+
+To bring up the editor you need to add the Summertime editor in your page.
+
+Add css:
+
+```html
+<link rel="stylesheet" href="{{DIR_ADMINLTEPLUGINS}}/summernote/summernote-bs4.min.css">
+```
+
+Add javascript:
+
+```html
+<script src="{{DIR_ADMINLTEPLUGINS}}/summernote/summernote-bs4.min.js"></script>
+<script>
+ $(document).ready(function () {
+ $('.summernote').summernote();
+ });
+</script>
+```
+
+By adding ``'type' => 'html'`` an html editor will be rendered by adding a class named "summernote".
+
+```php
+$renderAdminLTE->getFormTextarea(array (
+ 'type' => 'html',
+ 'label' => 'Enter text',
+ 'name' => 'textdata',
+ 'value' => 'Here is some text...',
+));
+```
+
+This returns
+
+```html
+<div class="form-group row">
+ <label for="textdata-e3e69c691af3280a1a69563ea05922e4" class="col-sm-2 col-form-label">
+ Enter text
+ </label>
+ <div class="col-sm-10">
+ <textarea class="form-control summernote myclass" name="textdata">
+ Here is some text...
+ </textarea>
+ </div>
+</div>
+```
diff --git a/docs/50_Forms/_index.md b/docs/50_Forms/_index.md
new file mode 100644
index 0000000000000000000000000000000000000000..61e8743faaa9a163962600f2131ea663c3eff02c
--- /dev/null
+++ b/docs/50_Forms/_index.md
@@ -0,0 +1,7 @@
+<html>
+<div class="hero">
+
+ <h2>AdminLTE 3 :: Form elements</h2>
+
+</div>
+</html>
diff --git a/docs/images/examples_input.png b/docs/images/examples_input.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cd7ba6146264322ce1c08e26edbac410c695f66
Binary files /dev/null and b/docs/images/examples_input.png differ
diff --git a/docs/images/examples_input_append_prepend.png b/docs/images/examples_input_append_prepend.png
new file mode 100644
index 0000000000000000000000000000000000000000..5333b41def5a53bda23cf1e1187be329c4a6fd2a
Binary files /dev/null and b/docs/images/examples_input_append_prepend.png differ
diff --git a/docs/images/examples_textarea.png b/docs/images/examples_textarea.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cf1135dfe5b0e7328e47bb9b5eed8bf5e036029
Binary files /dev/null and b/docs/images/examples_textarea.png differ
diff --git a/docs/style.css b/docs/style.css
index 18463c799d9cd101d8f9b27a282128cde4494d99..fa3af98a8edda3befc730aef28eeb17c77a9de0b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -156,14 +156,24 @@ h2:first-of-type {
border-bottom: var(--axel_h3-bottom);
}
-.s-content h4 {
+
+.s-content > h4 {
+ margin: 0;
+ font-size: 135%;
+ font-weight: bold;
+ margin-top: 2em;
+}
+
+.s-content .TableOfContentsContainer h4 {
margin: 0;
font-size: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.05);
padding: 0.3em;
}
-
+ul.TableOfContents a{
+ color: #666;
+}
.s-content pre {
background: var(--axel_pre-background);
}