# GroupBox

The `GroupBox` displays a frame around a group of controls with or without a caption. Use a `GroupBox` to logically group a collection of controls on a form. The `GroupBox` is a container control that can be used to define groups of controls.

A typical use for a group box is to contain a logical group of `RadioButton` controls. When you have two group boxes, each containing several radio buttons, each group of buttons is mutually exclusive, setting one option value per group.

You can add controls to the `GroupBox` using the `Add` method of the `Controls` property.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation.](http://docs.wisej.com/api)
{% endhint %}

## Features

### Collapsible

The visibility of the `GroupBox` can be controlled at runtime using the `ShowCloseButton` property.

![GroupBox demonstrating collapsible functionality](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-82a54b8cd204eb702aeb9a7e2ec4bef3f7f26934%2Fimage.png?alt=media)

### CheckBox

The `GroupBox` control features an optional checkbox that can be toggled to enable or disable the child controls. Set the `ShowCheckBox` property to true to show the checkbox. Set the `Checked` property to toggle the checked state.

![GroupBox showing checkbox integration for enabling/disabling contents](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-381ac4b7882727c6af350592bdd5be449a9cf902%2Fimage.png?alt=media)

### AutoSize

When enabled, the `GroupBox` control resizes itself to fit its contents according to the `AutoSizeMode` property specified.

![GroupBox demonstrating automatic resizing behavior](https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-f7a17bdb8dc6d804f556a3e070a8182731bb3941%2FGroupBoxAutoSize.gif?alt=media)

## Advanced

### JavaScript Widget

| Item             | Description                                                                                                                                                                                           |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name       | "wisej.web.GroupBox"                                                                                                                                                                                  |
| Theme appearance | "groupbox", see [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements).                                                                                                               |
| Child components | "legend" is the groupbox legend. "frame" is the groupbox frame. "close-button" is the button that hides the groupbox. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model). |
| Source code      | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                   |