Skip to content
On this page

badge 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.

Released under the MIT License.