Bixby Developer Center

Guides
References

Input Component Patterns

The design specifications for these components should only be used within Input Moments within Input Views.

In addition to the components listed, you can also use the universal components to further organize and format your information.

You can learn more about the components used in the different ways to gather information from users in the linked sections:

Selection Components

If you need to ask a user to select an item from a list, use a selection layout. This is similar to using a list to display results in a Result moment.

Selection layouts are made using the selection-of key in the input view. Within this list, you should use one of the pre-set components to display each item, most notably cards.

Note

These pre-set components are advantageous because they allow you to display information without having to worry about spacing between the components or which groups of components go well together.

You can use any of these cards in your selection list:

The following are some examples, with more information on these examples below.

Cell CardTitle CardCompound Card
Cell CardTitle CardCompound Card

Title Cards

You can use title cards for input lists when presenting simple text. This is the most commonly used component for listing items out in a selection layout, and is useful because it allows users to quickly scan the options on the screen. Additionally, this component has more flexibility in terms of of style and number of lines than a cell card.

Cell Cards

You can also use cell cards for input lists. You should use these when you want to list a short amount of text information and optionally add a supplemental image like an avatar. The text displays the first two lines in a cell card.

Thumbnail Cards

You can also use thumbnail cards for input lists. If your product image is supplemental information or images are not the top priority, thumbnail cards are the best formatting components. Use case examples include news headlines, sports teams highlights, or TV channels with logos. You can also use lower-resolution images that are often provided by users. The thumbnail image has different ratio options you can try below.

Compound Cards

You can use compound cards for input lists when one of the pre-formatted cards won't fit your information design.

To complete your custom card, you can use the following components:

Image Cards

You can use image cards when the image contains priority information required for the user to make a decision. You can achieve greater visual impact with high-resolution dynamic images. Because you are showing multiple options in this first view, image cards should only be used when the large image is showing the most important information that will affect a user's decision.

Elicitation Components

For a situation where you need to, you can use the selection components as well as the auto-complete component, which presents a search field with completion suggestions from a given list.

Picker Components

There are a variety of pre-formatted picker components you can use to gather information from a user within an input view.

  • date-picker: lets users select a date
  • time-picker: lets users select a time
  • calendar: lets users select a date or date range from a calendar
  • image-picker: lets users select one or more images
  • form: generates a view with editable fields for users to input information

Pickers