SearchBar Component
The helper text below contains HTML in a string.
This SearchBar contains a Select component.
The invalid text below contains HTML in a string.
Demonstrating container queries
The default styles of the SearchBar component use a row (horizontal) layout, but the responsive styles are adjusting based on where each card is rendered.
Responsive styles based on container queries are updated based on the width of an element's parent container. They are not adjusted based on the width of the viewport. For example, the component in the narrow mimiced "sidebar" is rendered using a column (stacked) layout, while the component in the wider "main content" area is rendered using the expected row (horizontal) layout. The components know to do this because styles set using container queries look at the width of the parent container and not at the width of the viewport.