Selection Controls allow users to make selections within the UI. These selections can be used to customize the user experience, change settings or allow the user to provide information. Each type of selection control represents a different use case.
🎭 Types
Checkbox: The checkbox component is used to select one or multiple independent items from a list. These selections do not take place immediately, and must be confirmed again by the user (typically via. a button)
Radio Button: The radio button component is used to select one item from a list of mutually exclusive items. This selection does not take place immedietly, and must be confirmed again by the user (typically via. a button)
Switch: The switch component is used to toggle one item between 2 mutually exclusive options. This selection takes place immediately, meaning that settings, filters and other user options are immediately changed and applied when switches are interacted with. Switches always have a default value.
🎯 Usage
🎭 Types
Checkbox: The checkbox component is used to select one or multiple independent items from a list. These selections do not take place immediately, and must be confirmed again by the user (typically via. a button)
Radio Button: The radio button component is used to select one item from a list of mutually exclusive items. This selection does not take place immedietly, and must be confirmed again by the user (typically via. a button)
Switch: The switch component is used to toggle one item between 2 mutually exclusive options. This selection takes place immediately, meaning that settings, filters and other user options are immediately changed and applied when switches are interacted with. Switches always have a default value.
🫀 Anatomy
Spacing, Sizing & Alignment:
Checkbox: (height: 16px; width: 16px; padding: 3px; icon-size: 10x10px)
Radio Button: (height: 16px; width: 16px; padding: 3px; icon-size: 10x10px)
Switch - Default: (height: 16px; width: 36px; font-size: 10pt; padding: 2px; icon-size: 10x10px)
Switch - On / Off: (height: 16px; width: 40px; font-size: 14pt; icon-size: 14x14px)
Switch - Yes / No: (height: 16px; width: 36px; switch padding: 2px; thumb padding: 3px; icon-size: 6x6px)
With Label: (height: 16px; font-size: 12pt; spacing: 5px)
💟 Icons Used
🔗 Zeplin Link
🔢 Attributes
IsSelectedBooleanfalseIsDisabledBooleanfalselabelString-typeString-nameString-value--🔍 Design Preview