• Default
• 3D

The groupbox component is used to group individual components into a set of components with an optional title. Click on the title to show or hide the groupbox content.

<zk xmlns:w="client">
	<style src="/widgets/layout/group_box/style.css" />
	<vlayout spacing="15px">
		<hlayout spacing="15px">
			<groupbox id="gb1" width="300px" onOpen="cb.setChecked(event.open);">
				<caption>
					<checkbox id="cb" checked="true" onCheck="gb1.setOpen(event.checked)"/>
					Enable Backups
				</caption>
				<hlayout valign="middle">
					<label value="Directory:" />
					<textbox value="/home/zk/projects" />
				</hlayout>
				<checkbox label="Compress archived files" />
			</groupbox>
			<groupbox id="gb2" mold="3d" width="300px">
				<caption image="/widgets/layout/group_box/img/drive-arrow.png" label="Enable Backups" />
				<hlayout valign="middle">
					<label value="Directory:" />
					<textbox value="/home/zk/projects" />
				</hlayout>
				<checkbox label="Compress archived files" />
			</groupbox>
		</hlayout>
		<hlayout spacing="15px">
			<groupbox width="300px">
				<caption iconSclass="z-icon-folder-open-o" label="Enable Backups" />
				<hlayout valign="middle">
					<label value="Directory:" />
					<textbox value="/home/zk/projects" />
				</hlayout>
				<checkbox label="Compress archived files" />
			</groupbox>
			<groupbox mold="3d" width="300px"
					  w:onOpen="this.caption.setIconSclass('z-icon-caret-' + (event.open ? 'up' : 'down'));">
				<caption label="Enable Backups" width="100%" sclass="customPosition"
						 iconSclass="z-icon-caret-up" />
				<hlayout valign="middle">
					<label value="Directory:" />
					<textbox value="/home/zk/projects" />
				</hlayout>
				<checkbox label="Compress archived files" />
			</groupbox>
		</hlayout>
	</vlayout>
</zk>

.z-caption.customPosition .z-caption-content {
	width: 100%;
	position: relative;
}

.z-caption.customPosition .z-caption-content i {
    position: absolute;
    right: 0px;
    font-size: 16px;
}

.z-groupbox-collapsed .z-caption .z-icon-folder-open-o::before {
    content: '\f114'; /*z-icon-folder-o*/
}