A groupbox allow individual ZK components to be grouped and manipulated as a collective.
Clicking on the optional title would show or hide the constituent components.

In this example, four group boxes are used to show/hide levels of details.

<zk xmlns:n="native">
	<div>
		<groupbox width="fit-content" sclass="main z-demo-config" style="margin: auto">
			<caption label="Enable Backups" />
			<hlayout spacing="30px" style="padding-left: 10px;">
				<image src="/widgets/layout/complex_group_box/img/backup_icon64.png"></image>
				<n:h1 class="cg-title">Backup Your Files</n:h1>
				<n:h3 class="cg-desc">The easiest way to backup your files</n:h3>
			</hlayout>
			<separator height="15px"></separator>
			<vlayout spacing="15px">
				<groupbox mold="3d" width="100%">
					<caption image="/widgets/layout/complex_group_box/img/directories.png" label="Directories" />
					<hlayout spacing="30px">
						<vlayout>
							<label value="Source" />
							<hlayout>
								<textbox value="/home/zk/projects" width="200px" />
								<image src="/widgets/layout/complex_group_box/img/file.png" />
							</hlayout>
						</vlayout>
						<image src="/widgets/layout/complex_group_box/img/arrow.png"></image>
						<vlayout>
							<label value="Destination" />
							<hlayout>
								<textbox value="/mnt/backup/zk" width="200px" />
								<image src="/widgets/layout/complex_group_box/img/file.png" />
							</hlayout>
						</vlayout>
					</hlayout>
				</groupbox>

				<groupbox id="gb" mold="3d" width="100%" >
					<caption image="/widgets/layout/complex_group_box/img/schedule.png" label="Schedule" />
					<hlayout spacing="50px">
						<vlayout width="100px">
							<radiogroup>
								<attribute name="onCheck"><![CDATA[
									dtbx.setDisabled(self.getSelectedIndex() < 1);
								]]></attribute>
								<vlayout>
									<radio label="Day" value="0" selected="true" />
									<radio label="Week" value="1" />
									<radio label="Month" value="2" />
								</vlayout>
							</radiogroup>
						</vlayout>
						<vlayout>
							<hlayout>
								<label value="Date :" />
								<datebox id="dtbx" width="100px" disabled="true" />
							</hlayout>
							<hlayout>
								<label value="Time :" />
								<timebox id="tbx" width="100px" cols="16" format="hh:mm" onCreate="self.value = new Date()" />
							</hlayout>
						</vlayout>
						<vlayout>
							<radiogroup>
								<vlayout>
									<radio label="Only copy new/modified files" selected="true"/>
									<radio label="Copy all files at every time" value="1" />
								</vlayout>
							</radiogroup>
						</vlayout>
					</hlayout>
				</groupbox>
				<groupbox mold="3d">
					<caption image="/widgets/layout/complex_group_box/img/status.png" label="Status" />
					<hlayout>
						<vlayout width="230px" spacing="5px" style="padding-left: 30px;">
							<button label="Backup now!" height="60px" width="200px" onClick="alert(self.label)"></button>
							<button label="Check for Updates" height="30px" width="200px" onClick="alert(self.label)"></button>
							<button label="About" height="30px" width="200px" onClick="alert(self.label)"></button>
						</vlayout>

						<vlayout width="300px" spacing="12px">
							<hlayout hflex="1">
								<label sclass="statusLabel" hflex="1" value="Name"/>
								<label hflex="1" value="My_Backup"/>
							</hlayout>
							<hlayout hflex="1">
								<label sclass="statusLabel" hflex="1" value="Available"/>
								<label hflex="1" value="123.4 GB of 972.5 GB"/>
							</hlayout>
							<hlayout hflex="1">
								<label sclass="statusLabel" hflex="1" value="Oldest Backup"/>
								<label hflex="1" value="November 11, 2008"/>
							</hlayout>
							<hlayout hflex="1">
								<label sclass="statusLabel" hflex="1" value="Latest Backup"/>
								<label hflex="1" value="August 20, 2011"/>
							</hlayout>
							<hlayout hflex="1">
								<label sclass="statusLabel" hflex="1" value="Next Backup"/>
								<label hflex="1" value="Today, 16:00"/>
							</hlayout>
						</vlayout>
					</hlayout >
				</groupbox>
			</vlayout>
		</groupbox>
	</div>
	<style>
	.cg-title {
		font-weight: normal;
		color: #008CB5;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.cg-desc {
		margin-top: 0;
		font-family: arial,sans-serif;
		font-size: small;
		font-weight: normal;
		color: #252525;
	}
	.gray_bkg {
		background-color: #ccc;
	}

	.statusLabel {
		display: block;
		text-align : right;
		font-weight : bold;
	}
	</style>
</zk>