Currency input
Currency input field for use with CurrenciesCollection
Option Visibility
maxVisibleOptions and showAllOptions both control how many options a dropdown shows before it scrolls, while viewportInset controls how much vertical space the dropdown treats as usable. The examples below open the dropdowns to highlight their differences.
Default
Without either input, each dropdown caps its height (~200px) and scrolls when the options overflow.
USD
maxVisibleOptions
maxVisibleOptions caps the dropdown to that many option rows, then scrolls for the rest. Below it is capped to 4 rows, so the remaining currencies are reachable by scrolling.
USD
showAllOptions
showAllOptions overrides the cap entirely and shows every option without scrolling (still constrained to the available space so it is never clipped). Below, all currencies are shown at once.
USD
Per-selector independence
showAllOptions is applied independently per selector and takes precedence over maxVisibleOptions. Below, every selector is capped to 6 rows, but showAllOptions is enabled only for the budget selector — so the currency dropdown scrolls while the budget dropdown shows all options.
Task ($10 – 30 per hour)
USD
viewportInset
A dropdown can open underneath a fixed navbar or footer, since those sit on top of the page but aren't counted when working out how much room the dropdown has. viewportInset tells the dropdown how much space they take at the top and/or bottom so it's left out of the available-space calculation. Below, 107px is reserved at the top (navbar) and 80px at the bottom (sticky footer), so the dropdown keeps clear of both — opening upward stops 107px short of the top, opening downward stops 80px short of the bottom.
USD