Patterns/Combobox Input

fd-dialog · 6 examples from SAP's documentation · Back to the gallery

About

The Combobox Input component is an opinionated composition of the input group, popover and list components. The popover and \

AsFormItem

Note that the popover body width is restricted to a max of 37.5rem to avoid readability issues in large-width popovers. Applications are free to override this in their custom styles if needed and own any readability issues arising from this override.

  • Apple
  • Orange
  • Banana
  • Kiwi
  • Nectarine
  • Apricots
  • Peache
  • Plum
  • Mango
  • Strawberry
  • Blueberry
  • Watermelon
  • Honeydew

TwoItemsAndItemsGrouping

The \

  • Product 1 1000 EUR
  • Product 2 750 EUR
  • Product 3 780 EUR
  • Product 4 40 EUR
  • Apple
  • Orange
  • Banana
  • Kiwi
  • Tomato
  • Onion
  • Spinach
  • Potato

MatchPopoverBodySize

The default length size of the popover body is often different from the text length. The body length can be adjusted to match the text length by adding the \

  • Apple
  • Orange
  • Banana
  • Kiwi

DisabledAndReadOnly

To disable a \

Semantic

For a complete list of states supported by the \

Success message
  • Apple
  • Orange
  • Banana
  • Kiwi

Mobile

For mobile devices, or tablets, combobox component should be displayed in fullscreen mode. So instead of using popover and dropdown, it should be wrapped in \