The Switch component provides a visual toggle for binary yes/no choices. It offers a more modern, interactive alternative to checkboxes for collecting on/off or yes/no responses.
When to use Switch
Section titled “When to use Switch”Switch is ideal for:
- Preference toggles (yes/no)
- Feature opt-ins
- Settings-style questions
- Binary choices with clear on/off states
- Modern, interactive form designs
Adding a Switch component
Section titled “Adding a Switch component”-
Open your form in the editor
-
Drag the Switch component from the left sidebar onto your form
-
Click the component to select it and configure its settings
Configuration options
Section titled “Configuration options”Question label
Section titled “Question label”The text that describes what the switch controls.
Tips for effective labels:
- Phrase as a statement that can be true or false
- Make it clear what “on” means
- Keep it concise
Examples:
- “Receive email notifications”
- “Enable dark mode”
- “Subscribe to updates”
- “Make my profile public”
Description
Section titled “Description”Optional helper text that appears near the switch.
When to use descriptions:
- To explain what happens when enabled/disabled
- To provide additional context
- To clarify the implications of the choice
Examples:
- “We’ll send you weekly digest emails”
- “Your profile will be visible to other users”
- “You can change this setting later”
Default value
Section titled “Default value”Set whether the switch starts in the on or off position.
Considerations for default value:
- Off (default): User must actively opt in
- On: User must actively opt out
Required
Section titled “Required”Toggle whether the user must interact with the switch before submitting.
When enabled:
- Users must explicitly set the switch (can’t leave it in default state without interaction)
- Useful when you need a deliberate choice, not just acceptance of a default
Switch states
Section titled “Switch states”The switch has two visual states:
| State | Appearance | Meaning |
|---|---|---|
| Off | Toggle on left, muted color | No / Disabled / False |
| On | Toggle on right, active color | Yes / Enabled / True |
Switch vs. Checkbox
Section titled “Switch vs. Checkbox”Both components collect yes/no responses, but they have different use cases:
| Aspect | Switch | Checkbox |
|---|---|---|
| Visual style | Modern, interactive | Traditional, familiar |
| Best for | Settings, preferences | Agreements, confirmations |
| Interaction | Slide or click | Click to check |
| Default state | Can default to on or off | Typically unchecked |
| User expectation | Toggle a setting | Confirm or agree |
Use Switch when:
- The question feels like a setting or preference
- You want a more modern, interactive feel
- The choice is about enabling/disabling something
Use Checkbox when:
- Collecting agreement or consent
- The pattern is “I confirm…” or “I agree…”
- Users expect a traditional form experience
Tips for effective use
Section titled “Tips for effective use”Label clearly. The label should make it obvious what “on” means without needing to see the switch state.
Consider the default carefully. The default state influences user behavior. Opt-in defaults are more ethical for marketing preferences.
Use for settings-style questions. Switches feel natural for preferences and settings, less so for confirmations.
Provide context. Use descriptions to explain the implications of each state.
Don’t overuse. A form full of switches can feel overwhelming. Mix with other component types.
Accessibility
Section titled “Accessibility”The Switch component is built with accessibility in mind:
- Proper toggle button semantics
- Keyboard accessible (Space or Enter to toggle)
- Screen reader announces state changes
- Clear visual distinction between states
- Focus states are clearly visible
Handling responses
Section titled “Handling responses”Switch responses in your form results:
- Display as “Yes” or “No” (or On/Off)
- Can be filtered by state
- Are included in exports as boolean values
- Useful for segmenting respondents by preference
Related
- Checkbox - For confirmations and agreements
- Checkboxes - For multiple selections
- Multi Choice - For single selection from multiple options
Need help?
For additional assistance with the Switch component, check our FAQ section or contact our support team.