Bixby Developer Center

Guides
References

selection-of

optionalvalue required

Generates a full-screen Selection List component that enables users to select one or more items in a given list using the selection-of key in input-view. This is also known as the value picker in the Design Guides. Only card components can be in a selection-of list.

Note

Customizable text for the submit-button is only available for multi-selection of items in selection-of. No button is displayed for users when selecting a single value.

If you want to display the details of an item after a user taps it, make sure to define the on-click key with a view-for that maps it to the details layout. The user can then choose to select that item on the details page by tapping on the Select button.

If you allow multi-selection and set an on-click on cards within the list, the on-click definition will be ignored.

Watch devices do not support conversation drivers in an input view with selection-of.

Examples

    selection-of (this) {
where-each (one) {
// you can use conditional logic to control how candidates are displayed, using either a standard layout with a match pattern, or a layout macro

cell-card {

slot2 {
content {
primary {
template ("#{value (one.firstName)} #{value (one.lastName)}")
}
secondary {
template ("#{value (one.gender)}")
}
}
}
}

}
}

View on GitHub

Here is how selection-of appears on different devices:

MobileWatchTV (Expanded View)Fridge
selection-of on Mobileselection-of on Watchselection-of on TVselection-of on Fridge

Here is the input-view of the example.shirt sample capsule, so the user can select a shirt:

input-view {
match: Shirt (this)

message (Which shirt?)

render {
selection-of (this) {
where-each (one) {
layout-macro (shirt-image-card) {
param (shirt) {
expression (one)
}
}
}
}
}
}

View on GitHub

This is the layout-macro definition of shirt-image-card:

layout-macro-def (shirt-image-card) {
params {
param (shirt) {
type (Shirt)
min (Required) max (One)
}
}
content {
image-card {
aspect-ratio (4:3)
image-url ("[#{value(shirt.images[0].url)}]")
title-area {
halign (Start)
slot1 {
text {
value ("#{value(shirt.title)}")
style (Title_M)
}
}
slot2 {
single-line {
text {
value ("#{value(shirt.brand)}")
style (Title_XS)
}
}
}
slot3 {
single-line {
text {
value ("#{value(shirt.price)}")
style (Detail_L)
}
}
}
}
}
}
}

View on GitHub

Here is how it appears on mobile:

Shirt Input View on Mobile

Here is how it appears on a watch:

Shirt Input View on Watch

Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Child Keys

default-sort-order
optional
Provides a single sort option that overrides the natural-sort-order defined in the concept
has-details
optional
This key is deprecated
header
optional
Header container for Bixby Views
highlights
optional
Highlight specific results on the first page of a rendered list in result-view and input-view of a selection list
navigation-mode
optional
Navigation mode defines the list navigation experience for the user
select-button-text
optional
Selection button text
submit-button
optional
Enables you to customize the text of the submit button for certain components
where-each
optional
Determines what displays in the view for users per the specified binding variable
where-each-page[deprecated]
optional
This key is deprecated