Terms And Conditions (Toggle)

Users can easily enable or disable the field or confirming consent such as Terms and Conditions or notifications.

Default/Off
Toggle label Helper text This is a sample description explaining what this toggle controls. Toggle it on or off to change the setting.
States
Toggle label
Description text for the toggle setting.
Default/Off Toggle is inactive. The switch is positioned to the left and the setting is disabled.
Toggle label
Description text for the toggle setting.
Default/On Toggle is active. The switch moves to the right indicating the setting is enabled.
Toggle label
Description text for the toggle setting.
Active/Focus Active: Occurs while the user is clicking or tapping the toggle. Focus: Indicates the toggle is keyboard-focused and ready to receive input. Displayed with a visible blue outline and focus ring.
Toggle label
Description text for the toggle setting.
Disabled The toggle is visible but cannot be interacted with.
Toggle label
Description text for the toggle setting.
Read only The state is visible but cannot be modified by the user.
Toggle label This field is required
Description text for the toggle setting.
Error Appears when a required toggle action has not been completed.
Behaviour
Toggle Interaction
  • Users can click or tap the switch to change between On and Off states. The switch position and color update immediately to reflect the selected state.
  • Unlike a checkbox, a toggle represents an immediate action — the change takes effect the moment the switch moves, without needing to submit a form. Use this component appropriately.
Specs
1
Toggle Label
  • Describes the setting or preference being controlled.
  • Keep it short and clear to what it enables or disables.
  • Recommended max 45 char (include spaces).
  • Max 80 char (include spaces).
2
Description
  • Provides context or consequences of the action
  • Supports multi-line text for detailed explanations
  • Recommended max 45 char (include spaces).
  • Max 700 char (include spaces).
3
Toggle switch
  • The interactive element that users click to enable/disable
4
Helper text (Optional)
  • Provides additional guidance or contextual information.
  • Keep copy short. Read usage guidelines.
  • Recommended max 30 char (include spaces).
  • Max 60 char (include spaces).
5
Switch position
  • Switch left (default): label above; helper text directly below the label; switch sits to the left of the description on the row below.
  • Switch right: label above; helper text directly below the label; switch sits to the right of the description on the row below.
  • Use switch right for Terms & Conditions-style consent. Keep one position consistent within a form.
Off state
1 Toggle label
4 Helper text
3 Description text 2
On state
3 Description text
Switch right
Toggle label 1 Helper text 4 Description text 2
Dos and Don'ts
  1. Use toggles only for immediate on/off actions.
  2. Do not use vague labels like "Enable" without context.