You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Actions and Inputs

Togglebox


Custom Content

Toggleboxes have both a title and a label. The title is an optional line of text, while the label is an open field for custom content.

Title and simple label

No title, complex label

In A Form

The togglebox can be incorporated into the Form component.

States


Control Alignment

By default, the control (Radio, Checkbox, or Toggle switch) is vertically centered in the Togglebox. The control can also be aligned to the top. This is useful for taller Toggleboxes where the content is not center aligned. The control will be aligned to the title, if it exists.


Best Practices

  • With custom labels, avoid adding interactive elements inside the Togglebox.
  • The best practices of the individual form components are applicable to the Togglebox.

Components

Patterns

  • Form design pattern for how related controls are ordered.

Importing

import { Togglebox } from '@servicetitan/design-system';