Toggle
A switch-style control for binary choices, indicating on/off or enabled/disabled states with immediate effect. Toggles differ from checkboxes in that they typically apply changes immediately rather than requiring a submit action. Use clear labeling so users understand what enabled and disabled states mean.
Dropdown
An interactive element that reveals a list of options when clicked, saving space while providing multiple choices. Dropdowns work best with 5-15 options—fewer suggests radio buttons, more suggests search or typeahead. Ensure dropdown menus are keyboard accessible and work well on touch devices.
Form
An interactive element that collects user input through fields like text boxes, dropdowns, and checkboxes. Well-designed forms balance collecting necessary information with respecting user time and effort. Keep forms short, use clear labels, provide helpful validation messages, and consider progressive disclosure for complex forms.
Modal
A dialog overlay that requires user attention before interacting with underlying content, used for alerts, forms, or focused tasks. Modals should have clear purposes and obvious dismissal methods—don't trap users in unexpected dialogs. In Framer, build modals as overlay components with appropriate entrance and exit animations.