TuiSearchBar is a mobile search field. Put tuiSearchBar on any element — semantically that is <search> — project a native <input tuiSearchBar> into it and a <button tuiButtonX> next to it. The searchbar only lays them out per platform: on iOS the button sits to the right of the field, on Android it moves inside the field on the leading side and turns into a back arrow.
FormControlfloating : liquid glass with a round cancel button. The bar sits on a <form> , so clearing and Enter work on their own floating from the start and keeps that look while the content scrolls under it. Pinning is up to you, the search bar only takes care of the look. Once the field becomes active, it takes the place of the app bar floating once the heading scrolls away — here the switch is driven by an IntersectionObserver watching the heading