diff --git a/docs/fields/collapsible.mdx b/docs/fields/collapsible.mdx
new file mode 100644
index 0000000000..e33e1fbea3
--- /dev/null
+++ b/docs/fields/collapsible.mdx
@@ -0,0 +1,44 @@
+---
+title: Collapsible Field
+label: Collapsible
+order: 60
+desc: With the Collapsible field, you can place fields within a collapsible layout component that can be collapsed / expanded.
+keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+
+ The Collapsible field is presentational-only and only affects the Admin panel. By using it, you can place fields within a nice layout component that can be collapsed / expanded.
+
+
+### Config
+
+| Option | Description |
+| ---------------- | ----------- |
+| **`label`** * | A label to render within the header of the collapsible component. |
+| **`fields`** * | Array of field types to nest within this Collapsible. |
+| **`admin`** | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
+
+*\* An asterisk denotes that a property is required.*
+
+### Example
+
+`collections/ExampleCollection.js`
+```js
+{
+ slug: 'example-collection',
+ fields: [
+ {
+ label: 'Header of collapsible goes here',
+ type: 'collapsible', // required
+ fields: [ // required
+ {
+ name: 'someTextField',
+ type: 'text',
+ required: true,
+ },
+ ],
+ }
+ ]
+}
+
+```
diff --git a/docs/fields/date.mdx b/docs/fields/date.mdx
index 3b48ddaf6d..7ccf812c1b 100644
--- a/docs/fields/date.mdx
+++ b/docs/fields/date.mdx
@@ -1,7 +1,7 @@
---
title: Date Field
label: Date
-order: 60
+order: 70
desc: The Date field type stores a Date in the database. Learn how to use and customize the Date field, see examples and options.
keywords: date, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/email.mdx b/docs/fields/email.mdx
index 5495e205cb..87d4ea677e 100644
--- a/docs/fields/email.mdx
+++ b/docs/fields/email.mdx
@@ -1,7 +1,7 @@
---
title: Email Field
label: Email
-order: 70
+order: 80
desc: The Email field enforces that the value provided is a valid email address. Learn how to use Email fields, see examples and options.
keywords: email, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/group.mdx b/docs/fields/group.mdx
index 2fc7614765..11946adf58 100644
--- a/docs/fields/group.mdx
+++ b/docs/fields/group.mdx
@@ -1,7 +1,7 @@
---
title: Group Field
label: Group
-order: 80
+order: 90
desc: The Group field allows other fields to be nested under a common property. Learn how to use Group fields, see examples and options.
keywords: group, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/number.mdx b/docs/fields/number.mdx
index ae75398323..0aa80a3f6d 100644
--- a/docs/fields/number.mdx
+++ b/docs/fields/number.mdx
@@ -1,7 +1,7 @@
---
title: Number Field
label: Number
-order: 90
+order: 100
desc: Number fields store and validate numeric data. Learn how to use and format Number fields, see examples and Number field options.
keywords: number, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/point.mdx b/docs/fields/point.mdx
index 2f1532e5bf..74fe7759c9 100644
--- a/docs/fields/point.mdx
+++ b/docs/fields/point.mdx
@@ -1,7 +1,7 @@
---
title: Point Field
label: Point
-order: 95
+order: 110
desc: The Point field type stores coordinates in the database. Learn how to use Point field for geolocation and geometry.
keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
diff --git a/docs/fields/radio.mdx b/docs/fields/radio.mdx
index afa7553590..4ca7ebd96e 100644
--- a/docs/fields/radio.mdx
+++ b/docs/fields/radio.mdx
@@ -1,7 +1,7 @@
---
title: Radio Field
label: Radio Group
-order: 100
+order: 120
desc: The Radio field type allows for the selection of one value from a predefined set of possible values. Learn how to use Radio fields, see examples and options.
keywords: radio, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/relationship.mdx b/docs/fields/relationship.mdx
index b7caa890ad..60bdb8c9ac 100644
--- a/docs/fields/relationship.mdx
+++ b/docs/fields/relationship.mdx
@@ -1,7 +1,7 @@
---
title: Relationship Field
label: Relationship
-order: 110
+order: 130
desc: The Relationship field provides the ability to relate documents together. Learn how to use Relationship fields, see examples and options.
keywords: relationship, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/rich-text.mdx b/docs/fields/rich-text.mdx
index 1d92c9a056..50b56b4234 100644
--- a/docs/fields/rich-text.mdx
+++ b/docs/fields/rich-text.mdx
@@ -1,7 +1,7 @@
---
title: Rich Text Field
label: Rich Text
-order: 120
+order: 140
desc: The Rich Text field allows dynamic content to be written through the Admin Panel. Learn how to use Rich Text fields, see examples and options.
keywords: rich text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/row.mdx b/docs/fields/row.mdx
index ede63f2667..b06d439c21 100644
--- a/docs/fields/row.mdx
+++ b/docs/fields/row.mdx
@@ -1,7 +1,7 @@
---
title: Row Field
label: Row
-order: 130
+order: 150
desc: With the Row field you can arrange fields next to each other in the Admin Panel to help you customize your Dashboard.
keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/select.mdx b/docs/fields/select.mdx
index 1baa286752..c40247b032 100644
--- a/docs/fields/select.mdx
+++ b/docs/fields/select.mdx
@@ -1,7 +1,7 @@
---
title: Select Field
label: Select
-order: 140
+order: 160
desc: The Select field provides a dropdown-style interface for choosing options from a predefined list. Learn how to use Select fields, see examples and options.
keywords: select, multi-select, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/tabs.mdx b/docs/fields/tabs.mdx
new file mode 100644
index 0000000000..525b9195d5
--- /dev/null
+++ b/docs/fields/tabs.mdx
@@ -0,0 +1,9 @@
+---
+title: Tabs Field
+label: Tabs
+order: 170
+desc: Tabs field desc here
+keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+Coming soon
diff --git a/docs/fields/text.mdx b/docs/fields/text.mdx
index bca0babced..af6345337a 100644
--- a/docs/fields/text.mdx
+++ b/docs/fields/text.mdx
@@ -1,7 +1,7 @@
---
title: Text Field
label: Text
-order: 150
+order: 180
desc: Text field types simply save a string to the database and provide the Admin panel with a text input. Learn how to use Text fields, see examples and options.
keywords: text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/textarea.mdx b/docs/fields/textarea.mdx
index a47a2bb5a5..2814f43b1e 100644
--- a/docs/fields/textarea.mdx
+++ b/docs/fields/textarea.mdx
@@ -1,7 +1,7 @@
---
title: Textarea Field
label: Textarea
-order: 160
+order: 190
desc: Textarea field types save a string to the database, similar to the Text field type but equipped for longer text. Learn how to use Textarea fields, see examples and options.
keywords: textarea, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/ui.mdx b/docs/fields/ui.mdx
index b918098622..9ee48eda66 100644
--- a/docs/fields/ui.mdx
+++ b/docs/fields/ui.mdx
@@ -1,7 +1,7 @@
---
title: UI Field
label: UI
-order: 170
+order: 200
desc: UI fields are purely presentational and allow developers to customize the admin panel to a very fine degree, including adding actions and other functions.
keywords: custom field, react component, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/docs/fields/upload.mdx b/docs/fields/upload.mdx
index 9d822697ee..dfcc2ed75f 100644
--- a/docs/fields/upload.mdx
+++ b/docs/fields/upload.mdx
@@ -1,7 +1,7 @@
---
title: Upload Field
label: Upload
-order: 180
+order: 210
desc: Upload fields will allow a file to be uploaded, only from a collection supporting Uploads. Learn how to use Upload fields, see examples and options.
keywords: upload, images media, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
diff --git a/src/admin/components/elements/Collapsible/index.scss b/src/admin/components/elements/Collapsible/index.scss
index 5337cc83a2..0cba405979 100644
--- a/src/admin/components/elements/Collapsible/index.scss
+++ b/src/admin/components/elements/Collapsible/index.scss
@@ -17,7 +17,7 @@
width: 100%;
display: flex;
align-items: center;
- padding: base(.75) base(1);
+ padding: base(.5) base(1);
&:hover {
background: var(--theme-elevation-100);
diff --git a/src/admin/components/elements/Collapsible/index.tsx b/src/admin/components/elements/Collapsible/index.tsx
index 3a261dc6e1..7f911bb919 100644
--- a/src/admin/components/elements/Collapsible/index.tsx
+++ b/src/admin/components/elements/Collapsible/index.tsx
@@ -20,7 +20,7 @@ export const Collapsible: React.FC = ({ children, onToggle, className, he
isNested && `${baseClass}--nested`,
].filter(Boolean).join(' ')}
>
-
+