Searchbox
How to use the SearchBox control to create a search experience in custom pages
Default
Default Searchbox with an icon button on the right. It will use 100% of the width.
Icon on the left side
Add a .searchbox--icon-start class to move the button to the left.
Auto hide icon
The icon will only be visible if the input is in focus.
Auto hide icon
Add a .searchbox--hide-btn class to Searchbox.
Auto Expand
Default Searchbox with an icon button on the right. It will use 100% of the width.
Auto Expand
Add a .searchbox--icon-start class to move the button to the left.
Combine them with a hidden icon
Add the searchbox--hide-btn class to the searchbox.
Combine them with a hidden icon
Add the searchbox--hide-btn class to the searchbox.
Custom widths
| Width | Desc | Preview |
|---|---|---|
Default
min(50%, 15.625rem)
|
The Minimum value of the container width is between 50% and 15.625rem |
|
| 70% |
Use the CSS variable in the Searchbox
style="--nf-search-collapsed-width:70%"
|
|
| 160px |
Use build-in class width, ex .w-160pxPlease check out more classes on the Sizing page. |
