Questions About the SearchField Background

[satoshi-homura]

https://heroui.com/en/docs/react/components/search-field

Due to the following CSS styling, the size of the search-field-group does not change even when the viewport changes; only the input elements contained within search-field__group change size.
As a result, the background color does not adjust to the size of the input elements.

.search-field__group {
  height: calc(var(--spacing) * 9);
}

Is this the intended behavior?

[cookesan]

It matches the current implementation: the visible shell/background is the group, and the group has a fixed h-9 height. Resizing only the input will not necessarily resize that shell.

In the styles, .search-field__group is the element with the background/border treatment and it applies inline-flex h-9. The input is inside that group and is set up to flex within it. The full-width path also applies width to the root/group, not just the input.

So for horizontal resizing, put the width on the SearchField/group level, or use the documented full-width variant:

<SearchField fullWidth>
  <SearchField.Input placeholder="Search..." />
</SearchField>

If you want the background to grow vertically with a larger input or viewport rule, the group height needs to be changed too. Overriding only the input size leaves the fixed-height group in place.