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
This is a sample description explaining what this toggle controls. Toggle it on or off to change the setting.
Helper text
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
Description text for the toggle setting.
This field is required
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
2
Description
  • Provides context or consequences of the action
  • Supports multi-line text for detailed explanations
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).
Off state — items 1, 2, 3, 4
1 Toggle label
3 Description text 2
4 Helper text
On state — items 3, 4
3 Description text
4 Helper text
Dos and Don'ts
  1. Use toggles only for immediate on/off actions.
  2. Do not use vague labels like "Enable" without context.