Form control

Enables users to perform control actions (select, multi-select, toggle) on a group.

Overview

Form controls are of three major types: a. Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. b. Toggle is a control that is used to quickly switch between two possible states. c. Checkboxes are used when there are multiple items to select in a list.

When to use

  • When inside a form, you want to allow user input for selecting or toggling any items.
  • For use in certain settings pages.

Anatomy

Anatomy of form control
  1. Control field: Select from a list of 3 types of controls - radio, checkbox, and switch.
  2. Label: Refers to the context of control.
  3. Description: Provides additional information on the control that helps user perform the specific action easily.

Best Practices

  1. These controls are mostly used inside forms and settings page.
  2. Make sure you use the 'active or ' state variant for showing feedback on when the user presses the control.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.