diff --git a/packages/react-components/react-search-preview/README.md b/packages/react-components/react-search-preview/README.md
index 335db2d647142..cae1148077784 100644
--- a/packages/react-components/react-search-preview/README.md
+++ b/packages/react-components/react-search-preview/README.md
@@ -4,7 +4,7 @@
 
 These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 
-SearchBox allows the users to access information with ease, providing flexibility and the ability to clear and filter the input to provide the best experience.
+The `SearchBox` component allows the users to access information with ease, providing flexibility and the ability to clear and filter the search.
 
 ### Usage
 
diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx
index 8004f2a097222..e240f9371c181 100644
--- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx
+++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx
@@ -6,7 +6,6 @@ const useStyles = makeStyles({
   base: {
     display: 'flex',
     flexDirection: 'column',
-    maxWidth: '490px',
   },
   filledLighter: {
     backgroundColor: tokens.colorNeutralBackgroundInverted,
diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md
index 08ff8ddeeb5f8..06ea62631c828 100644
--- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md
+++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md
@@ -2,4 +2,10 @@
 
 ### Do
 
+- **Consider wrapping `SearchBox` in a role="search" container for top-level site or app search fields.** This role exposes the search field as a landmark, and makes it easier to find for screen reader users. It should not be used unless the SearchBox is the primary search area for the entire site or app.
+
+- **Consider using `SearchBox` with underline or outline appearances.** When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.
+
 ### Don't
+
+- **Don't place `SearchBox` on a surface which doesn't have a sufficient contrast.** The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements.
diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx
index f59786f527279..6774d618e334e 100644
--- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx
+++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx
@@ -7,8 +7,6 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    // Prevent the example from taking the full width of the page (optional)
-    maxWidth: '400px',
   },
   fieldWrapper: {
     ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge),
diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md
index e69de29bb2d1d..01822476627d4 100644
--- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md
+++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md
@@ -0,0 +1,14 @@
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { SearchBox } from '@fluentui/react-search-preview';
+>
+> ```
+>
+> - Features and APIs may change before final release
+> - Please contact us if you intend to use this in your product
+
+The `SearchBox` component allows the users to access information with ease, providing flexibility and the ability to clear and filter the search.
diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx
index ee8c755689e37..835b71ea1785e 100644
--- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx
+++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx
@@ -6,7 +6,6 @@ const useStyles = makeStyles({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    maxWidth: '400px',
   },
   fieldWrapper: {
     ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge),