SelectionControl

Selection controls are essential for selection single or multiple choices in a form, or turn functions on and off. They are presented alone or in group to provide the user with a set of exclusive but related choices.

Radio

Usage
Specs

Radio buttons are small, circular buttons followed by a title. They are used in group of two or more to let the user select one from a set of exclusive but related choices. Radio buttons are used in forms to select a single option within multiple choices. The chosen option becomes highlighted with the selected state once tapped.

usage example image

States

example state image

Selected

example state image

Unselected

Checkbox

Usage
Specs

Checkboxes are circular buttons followed by a title that lets the user choose between two opposite states, actions, or values. They are used single or in group to let the user select single or multiple choices. Checkboxes are used as radio button to select single(language or payment mode selection) or multiple(in filters).

usage example image

States

example state image

Checked

example state image

Unchecked

Pill

Usage
Specs

Pills are buttons with text inside that lets the user choose between two opposite states. They are used in group of two or more to let the user select one from a set of related choices. Pills buttons are used in forms to select a single option within multiple choices. The chosen option becomes highlighted with the selected state once tapped. It is used in ratings page for tips.

usage example image

States

example state image

Pill Selected

example state image

Pill Unselected

Rating

Usage
Specs

Ratings are star shaped buttons to provide rating for completed order. They always come in the set of five where users can select the range from one to five stars. Ratings are used for taking star rating from users for a completed service. On tap anywhere from one to five the color of the star changes to denotes the number of stars selected.

usage example image

States

example state image

Rating Selected

example state image

Rating Unselected

Stepper

Usage
Specs

Steppers are buttons to add or remove products from shopping cart in sku based apps. Stepper is used in sku based apps to add or remove products from the shopping cart. On first tap it adds the product to shopping cart and changes the count to 1, it can be in increased by tapping the plus button again and removed by clicking the minus button.

usage example image

States

example state image

Active

example state image

Default

example state image

Disabled

Image Toggle

Usage

Image toggle are buttons with a shape where state can be toggled to on tap. Image toggles are used to add things to a list or collection, or change the state of a cell. It is currently used in gofood for adding things to favorite.

usage example image

States

example state image

Toggle_On

example state image

Toggle_Off