Collapsible Field
Expandable container that can be collapsed.
Collapsible Field
The collapsible field renders an expandable/collapsible container for nested fields.
Schema Properties
Prop
Type
UI Options
Same as Text Field.
Basic Usage
const schema = defineSchema({
fields: [
{ type: "text", name: "name", label: "Name" },
{
type: "collapsible",
label: "Advanced Options",
collapsed: true,
fields: [
{ type: "text", name: "apiKey", label: "API Key" },
{ type: "text", name: "secret", label: "Secret" },
],
},
],
});Examples
Dynamic Collapse State
{
type: "collapsible",
label: "Additional Details",
collapsed: { $data: "/showAdvanced", eq: false },
fields: [
{ type: "text", name: "notes", label: "Notes" },
],
}Conditional Collapsible
{
type: "collapsible",
label: "Shipping Address",
condition: { $data: "/differentShipping", eq: true },
fields: [
{ type: "text", name: "street", label: "Street" },
{ type: "text", name: "city", label: "City" },
],
}Nested Collapsibles
{
type: "collapsible",
label: "Advanced Settings",
fields: [
{
type: "collapsible",
label: "Security",
fields: [
{ type: "text", name: "apiKey", label: "API Key" },
],
},
{
type: "collapsible",
label: "Notifications",
fields: [
{ type: "switch", name: "email", label: "Email Notifications" },
],
},
],
}Data Shape
Collapsible fields do not contribute to form data. They are layout-only containers.