Checkbox and Radio
Checkbox
Usage:
Checkboxes is checkable input that communicates if an option is true, false or indeterminate. Allowing user to choose one or more options from a limited set of options. If you have more than 10 options, please use Select component instead.
Checkbox by state
Default Checkbox
Usage: Default state, a checkbox input includes a selected and unselected state.Checked Checkbox
Usage: Checked state when the checkbox is being selected.Intermediate Checkbox
Usage: State to show partially checked states. The parent checkbox will be indeterminate until all its child sub-options are checked.Disabled Checkbox
Usage: Disabled state. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.Checked Disabled Checkbox
Usage: This state indicate that the option is mandatory checked. The user can’t change the option.Intermediate Disabled Checkbox
Usage: This state indicates that the option in mandatory intermediate. So some of the sub-option is also mandatory checked too.Checkbox by Additional item
Checked with label
Usage: This is the default component that mainly use ini all over the design. The label is used to make checkbox context clear.Checked with label and Caption
Usage: This component mainly used for the checkbox that require additional information to describe the function or context of the checkbox.Radio
Usage:
Radio buttons are graphical user interface elements that allow user to choose only one option from a predefined set of mutually exclusive options. Radio is generally displayed in a radio group.
Radio by state
Default Radio
Usage: Default state, a radio input includes a selected and unselected state.Checked Radio
Usage: Checked state when the radio is being selected.Disabled Radio
Usage: Disabled state. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.Checked Disabled Radio
Usage: This state indicate that the option is mandatory checked. The user can’t change the option.Radio by Additional item
Checked with label
Usage: This component mainly used for the radio that require additional information to describe the function or context of the radio.Checked with label and caption
Usage: This is the default component that mainly use ini all over the design. The label is used to make radio context clear.Custom Picker/Custom Checkbox
Usage:
Custom check box is a component that usually used when required more clearer context of option checkbox. For example checkbox for choosing OTP Method, and else.
Selection State
Select State
Usage: This component indicated that the option is in selected state.Unselect State
Usage: This component indicated that the option is in unselected state.Muted State
Usage: This component indicated that the option is in muted state. At this state user can’t choose this option.Hover State
Usage: This component indicated that the option is in hover state. At this state user usually hasn’t selected the option that he/she choose, rather than moving the pointer on each option.Select Hover state
Usage: This component indicate that the option is being selected and hovered.Selection Type
With icon
Usage: This option selection is the complete example. There is icon, title text, and subtitle. Usually used when the option require the most clear context, so it’s require to show icon/image, title, and subtitle.Title Text and subtitle
Usage: This option selection is only showing title text and subtitle. This component usually used when the option is pretty clear described using text only, so the icon/image doesn’t required.Title Only
Usage: This option selection is only showing title text. This option select component used when the option doesn’t require complex desciption, so it’s enough using title text only.Colour/Image/Symbol picker
Usage:
This component usually used for picking option like icon, color, or image.
Element Picker type
Icon
Usage: This element picker usually used to pick an icon.Colour
Usage: This element picker usually used to pick an icon.Image
Usage: This element picker usually used to pick an image.Picking State
Hover
Usage: This component indicated that the option is in hover state. At this state user usually hasn’t selected the option that he/she choose, rather than moving the pointer on each option.Muted
Usage: This component indicated that the option is in muted state. At this state user can’t choose this option.Select
Usage: This component indicated that the option is in selected state.Unselect
Usage: This component indicated that the option is in unselected state.Select Hover
Usage: This component indicate that the option is being selected and hovered.Pattern Rule
Best Practice
- Work independently from each other: selecting one checkbox shouldn’t change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items.
- Be framed positively: for example, Turn on notifications instead of Turn off notifications
- Always have a label when being used to toggling a setting on or off
- Be listed according to a logical order, whether it’s alphabetical, numerical, time-based, or some other clear system.
- Link to more information or include a subtitle as required to provide more explanation. Don’t rely on tooltips to explain a checkbox.
Do
- Use for making it possible to choose one or more options from a limited number of options.
- Use for “accepting terms of service” and similar functionality.
- Use in forms to toggle something on or off.
Don't
- Avoid using when you have more than 10 options to choose from.
- Don’t change the selection of another checkbox when another one is clicked. Only exception is when a checkbox is used to make a bulk selection of multiple items.