Bixby Developer Center

A cell that displays input information to a user, split into two individual input-cell keys: the left and right. If a user selects one of the input cells, it brings up an input prompt where a user can make a selection.

One of several cells in row in a view that displays information about a user input. You can put two split-input-cell keys in a section. If a user selects a cell, the input information can be updated.

Interactive Demo

Child Keys

left required	The left portion of the split-input-cell
right required	The right portion of the split-input-cell

Examples

This example uses several input-cell components: two in their own row and a third row with a split-input-cell, with two cells of its own.

result-view {
  match: RideShare (rideShare) {
    from-output: ShowRideShareInputCells
  }

  message {
    template ("Here are input cells:")
  }

  render {
    layout {
      section {
        content {
          input-cell {
            label {
              template ("Pickup")
            }
            value {
              template ("60 S Market St, San Jose")
            }
            on-click {
              intent {
                goal: ShowRideShareInputCells
              }
            }
          }
          input-cell {
            label {
              template ("Dropoff")
            }
            value {
              template ("San Francisco Int'l Airport, San Francisco")
            }
            on-click {
              intent {
                goal: ShowRideShareInputCells
              }
            }
          }
          split-input-cell {
            left {
              input-cell {
                label {
                  template ("Ride Type")
                }
                value {
                  template ("#{value(rideShare.productType)}")
                }
                on-click {
                  intent {
                    goal: ShowRideShareInputCells
                  }
                }
              }
            }
            right {
              input-cell {
                label {
                  template ("Payment method")
                }
                value {
                  template ("Visa ***88")
                }
                on-click {
                  intent {
                    goal: ShowRideShareInputCells
                  }
                }
              }
            }
          }
        }
      } 
    }
  }
}

View master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Design Considerations

This component is applicable to this moment:

• Confirmation Moment

You can find design specifications for this component in the Components Spec download under Design Resources.