Switch Widget

Table of Contents

Create collapsible content using this widget. It is used to create toggle tabs that switch between two types of content or template. This widget has various features and customization options.

Content #

Primary: This tab shows its content by default. It is an active toggle.

  1. Label: Enter name for the toggle.
  2. Content Type: Assign the content type. Includes content or template.
  3. Add your content or select the template.

Secondary: It is another tab and its content is hidden. Options are similar to that of the primary.

Style #


  1. Alignment: Set the alignment of the switch button area.
  2. Background Color, margin, and padding for the switch button area.
  3. Toggle Button
    • Size: Adjust the size of toggle button.
    • Spacing: Adjust the gap between button and labels.
    • Padding: Set the padding inside button.
    • Others are border and background for styling both active or non-active tabs.
  4. Toggle Handler
    • Border and background are given for styling the toggle handler.

Label: You can style each labels individually switching between primary or secondary.

  1. Color: Change the color of the label.
  2. Active Color: Change the color of the label in active mode.
  3. Typography: Set the typography of the label.


  1. Alignment: Set the alignment of content.
  2. Other options are given for each content: primary & secondary.
    • Color, background color, padding, margin, border, and box-shadow.

Powered by BetterDocs

Leave a Reply

Your email address will not be published. Required fields are marked *