# Toggle Button

Component: A list of options in toggle button group and solo format for use in forms.

[Styleguide Link](https://zpl.io/29dzJAe)

* Parent: Form (Container)
* Child: [Label](../../overview/label), [Toggle - Ctrl](../../overview/toggle), [FC - Leading](fc-leading), [FC - Trailing](fc-trailing)

## Properties

### Label

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2FSex554MGq05NHVDq3sbd%2FLabel.png?alt=media&#x26;token=06411a2d-d17f-4b03-847a-8cf274ca34d8" alt=""><figcaption></figcaption></figure>

* **Top** - The label for the form field is placed above the form control.
* **Left** - The label for the form field is placed to the left of the form control.
* **None** - No label is used with the form control.

### Helper

The additional helper text that can be presented below the form control.

<figure><img src="https://217329376-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXJWCEk7b7vvAFeWpr2%2Fuploads%2F46zPOYjL4ULBpISOLjOk%2FHelper.png?alt=media&#x26;token=7032457a-355b-4753-819e-1a15f6595c91" alt=""><figcaption></figcaption></figure>

**Note:** The structure and spacing of this component is the same between Textfield, Textarea, Selectlist, Chiplist, Slider, Userlist, and Toggle Button.

**Note:** Each of the nested elements and primitives of this form component have properties that can be adjusted to customize the component.

