diff --git a/build/vnu-jar.mjs b/build/vnu-jar.mjs
index 726a154cb2..505a1d6a80 100644
--- a/build/vnu-jar.mjs
+++ b/build/vnu-jar.mjs
@@ -44,7 +44,10 @@ execFile('java', ['-version'], (error, stdout, stderr) => {
     'Attribute “switch” not allowed on element “input” at this point.',
     'Element “style” not allowed as child of element “div” in this context.*',
     // Allow empty option in select
-    'Element “option” without attribute “label” must not be empty.'
+    'Element “option” without attribute “label” must not be empty.',
+    // Allow inputmode
+    '.*The “inputmode” attribute is not supported in all browsers.*'
+    // !!! WARNING !!! check both quotes you are using when updating this list
     // End mod
   ].join('|')
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 88322886ab..f5f7f496eb 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -624,10 +624,10 @@ textarea {
 // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
 
 fieldset {
-  min-width: 0; // 1
+  min-inline-size: 0; // 1
   padding: 0; // 2
   margin: 0; // 2
-  border: 0; // 2
+  border: unset; // 2
 }
 
 // 1. By using `float: left`, the legend will behave like a block element.
@@ -636,8 +636,7 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-  float: left; // 1
-  width: 100%;
+  float: left;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
   font-weight: $legend-font-weight;
diff --git a/site/src/components/shortcodes/ComponentCard.astro b/site/src/components/shortcodes/ComponentCard.astro
index c99957176b..773c7f6be9 100644
--- a/site/src/components/shortcodes/ComponentCard.astro
+++ b/site/src/components/shortcodes/ComponentCard.astro
@@ -17,7 +17,7 @@ interface Props {
 const { component, idPrefix } = Astro.props
 ---
 
-<li class="col">
+<li class="col" data-name={component.name.toLowerCase()}>
   <div class="card h-100">
     <div class="card-top bg-secondary">
       <div class="ratio-16x9 d-flex flex-column justify-content-center align-items-center" inert>
diff --git a/site/src/components/shortcodes/ComponentFinder.astro b/site/src/components/shortcodes/ComponentFinder.astro
new file mode 100644
index 0000000000..d22806080b
--- /dev/null
+++ b/site/src/components/shortcodes/ComponentFinder.astro
@@ -0,0 +1,99 @@
+---
+import { getVersionedDocsPath } from '@libs/path'
+import { componentsDetails } from '../../../data/components-details'
+
+const existingStartingLetters = [...new Set(componentsDetails.map((component) => component.name.charAt(0)))]
+---
+
+<ouds-component-finder>
+  <form class="needs-validation mb-gridgap" novalidate onsubmit="return false">
+    <div class="text-input mb-small">
+      <div class="text-input-container">
+        <svg aria-hidden="true">
+          <use xlink:href={getVersionedDocsPath('assets/img/ouds-web-sprite.svg#search')}></use>
+        </svg>
+        <label for="oudsComponentFinderInput">
+          Start typing to filter components <span class="visually-hidden">and update the component list below</span>
+        </label>
+        <input
+          type="search"
+          name="componentFinderInput"
+          id="oudsComponentFinderInput"
+          class="text-input-field"
+          pattern="[a-zA-Z \\-]+"
+          placeholder=" "
+          data-feedback-id="componentSearchFeedback"
+          inputmode="search"
+        />
+      </div>
+      <p id="usernameFeedback" class="error-text">Alphabetical characters only.</p>
+    </div>
+    <fieldset class="d-md-flex align-items-center gap-xsmall" data-alpha-filter>
+      <legend class="my-md-none flex-shrink-0">
+        <span class="visually-hidden">filter by </span>Starting letter:
+      </legend>
+      <div class="chips-container">
+        <div class="chip chip-filter">
+          <input type="radio" id="radioCheckAll" name="componentFinderAlpha" value="all" checked />
+          <label class="chip-interactive" for="radioCheckAll">No filter</label>
+        </div>
+        {
+          existingStartingLetters.map((char) => (
+            <div class="chip chip-filter">
+              <input type="radio" id={`radioCheck${char}`} name="componentFinderAlpha" value={char.toLowerCase()} />
+              <label class="chip-interactive" for={`radioCheck${char}`}>
+                {char}
+              </label>
+            </div>
+          ))
+        }
+      </div>
+    </fieldset>
+  </form>
+  <ul class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-2xl-4" data-component-list>
+    <slot />
+  </ul>
+</ouds-component-finder>
+
+<script>
+  class OudsComponentFinder extends HTMLElement {
+    connectedCallback() {
+      const searchForm = this.querySelector('form') as HTMLFormElement
+      if (!searchForm) return
+      const finderInput = searchForm.elements.namedItem('componentFinderInput') as HTMLInputElement
+      const finderAlpha = searchForm.elements.namedItem('componentFinderAlpha') as RadioNodeList
+      const alphaFieldset = this.querySelector('[data-alpha-filter]')
+      if (!finderInput || !alphaFieldset || !finderAlpha) return
+
+      finderInput.addEventListener('input', () => {
+        this.resetList()
+        this.resetAlphaFinder()
+        if (finderInput.value && finderInput.checkValidity()) {
+          this.querySelectorAll(
+            `ul[data-component-list] > :not([data-name*="${finderInput.value.toLowerCase()}"])`
+          ).forEach((elt) => elt.classList.add('d-none'))
+        }
+      })
+
+      alphaFieldset.addEventListener('change', () => {
+        this.resetList()
+        if (finderAlpha.value && finderAlpha.value !== 'all') {
+          this.querySelectorAll(`ul[data-component-list] > :not([data-name^="${finderAlpha.value}"])`).forEach((elt) =>
+            elt.classList.add('d-none')
+          )
+        }
+      })
+    }
+
+    resetList() {
+      this.querySelectorAll('ul[data-component-list] > *').forEach((elt) => elt.classList.remove('d-none'))
+    }
+
+    resetAlphaFinder() {
+      this.querySelectorAll('input[type=radio]').forEach((elt) => ((elt as HTMLInputElement).checked = false))
+      ;(this.querySelector('input[type=radio][value="all"]') as HTMLInputElement).checked = true
+    }
+  }
+
+  customElements.define('ouds-component-finder', OudsComponentFinder)
+</script>
diff --git a/site/src/content/docs/components.mdx b/site/src/content/docs/components.mdx
index dfd760870a..d7fbf75abb 100644
--- a/site/src/content/docs/components.mdx
+++ b/site/src/content/docs/components.mdx
@@ -6,17 +6,20 @@ aliases:
   - "/docs/components/"
   - "/docs/[[config:docs_version]]/components/"
 toc: true
+extra_js:
+  - src: "[[docsref:/assets/js/validate-forms.js]]"
+    async: true
 ---
 
 import { componentsDetails } from '../../../data/components-details'
 
 ## Alphabetical order
 
-<ul class="list-unstyled row gy-large row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-2xl-4">
+<ComponentFinder>
   {
     componentsDetails.map((component) => <ComponentCard component={component} idPrefix={'_alpha'} />)
   }
-</ul>
+</ComponentFinder>
 
 <hr />
 
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
index 082056c031..5b1fc178ac 100644
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -14,6 +14,7 @@ export declare global {
   export const CalloutSoon: typeof import('@shortcodes/CalloutSoon.astro').default
   export const Code: typeof import('@shortcodes/Code.astro').default
   export const ComponentCard: typeof import('@shortcodes/ComponentCard.astro').default
+  export const ComponentFinder: typeof import('@shortcodes/ComponentFinder.astro').default
   export const DeprecatedIn: typeof import('@shortcodes/DeprecatedIn.astro').default
   export const EnableBtnCloseTooltip: typeof import('@shortcodes/EnableBtnCloseTooltip.astro').default
   export const Example: typeof import('@shortcodes/Example.astro').default
diff --git a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
index 6859b3536a..c9150286b8 100644
--- a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -153,4 +153,7 @@
   <symbol id="message-talk" viewBox="0 0 960 960" fill="currentColor">
     <path fill-rule="evenodd" d="M500,100C265.279,100,75,251.1,75,437.5c0,144.464,114.3,267.725,275,315.874V925L500,775c234.721,0,425-151.1,425-337.5S734.721,100,500,100ZM287.5,500A62.5,62.5,0,1,1,350,437.5,62.5,62.5,0,0,1,287.5,500ZM500,500a62.5,62.5,0,1,1,62.5-62.5A62.5,62.5,0,0,1,500,500Zm212.5,0A62.5,62.5,0,1,1,775,437.5,62.5,62.5,0,0,1,712.5,500Z" transform="scale(.96)"/>
   </symbol>
+  <symbol id="search" viewBox="0 0 24 24" fill="currentColor">
+    <path fill-rule="evenodd" d="m21.415 19.665-5.416-5.415A7.496 7.496 0 1 0 14.25 16l5.416 5.415a.6.6 0 0 0 .848 0l.902-.902a.6.6 0 0 0 0-.848ZM9.896 14.994a5.097 5.097 0 1 1 0-10.195 5.097 5.097 0 0 1 0 10.195" clip-rule="evenodd"/>
+  </symbol>
 </svg>
diff --git a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
index 6859b3536a..c9150286b8 100644
--- a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -153,4 +153,7 @@
   <symbol id="message-talk" viewBox="0 0 960 960" fill="currentColor">
     <path fill-rule="evenodd" d="M500,100C265.279,100,75,251.1,75,437.5c0,144.464,114.3,267.725,275,315.874V925L500,775c234.721,0,425-151.1,425-337.5S734.721,100,500,100ZM287.5,500A62.5,62.5,0,1,1,350,437.5,62.5,62.5,0,0,1,287.5,500ZM500,500a62.5,62.5,0,1,1,62.5-62.5A62.5,62.5,0,0,1,500,500Zm212.5,0A62.5,62.5,0,1,1,775,437.5,62.5,62.5,0,0,1,712.5,500Z" transform="scale(.96)"/>
   </symbol>
+  <symbol id="search" viewBox="0 0 24 24" fill="currentColor">
+    <path fill-rule="evenodd" d="m21.415 19.665-5.416-5.415A7.496 7.496 0 1 0 14.25 16l5.416 5.415a.6.6 0 0 0 .848 0l.902-.902a.6.6 0 0 0 0-.848ZM9.896 14.994a5.097 5.097 0 1 1 0-10.195 5.097 5.097 0 0 1 0 10.195" clip-rule="evenodd"/>
+  </symbol>
 </svg>
diff --git a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
index c68e9a852e..76729a7767 100644
--- a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
+++ b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg
@@ -124,4 +124,7 @@
   <symbol id="message-talk" viewBox="0 0 24 24" fill="currentColor">
     <path fill-rule="evenodd" d="M20.376 18.077h-.873l1.799 3.997a.656.656 0 0 1-1.033.761l-5.392-4.758h-3.651a2.666 2.666 0 0 1-2.664-2.663v-1.07L5.095 17.88a.656.656 0 0 1-1.103-.63l1.01-3.767h-.377A2.627 2.627 0 0 1 2 10.86V4.663A2.667 2.667 0 0 1 4.663 2h8.455a2.675 2.675 0 0 1 2.303 1.329.656.656 0 1 1-1.135.66 1.36 1.36 0 0 0-1.168-.677H4.663a1.352 1.352 0 0 0-1.35 1.351v6.197c0 .724.587 1.31 1.311 1.311h1.231a.657.657 0 0 1 .634.827l-.584 2.18 2.657-2.708V8.6a2.666 2.666 0 0 1 2.664-2.663h4.965a.656.656 0 0 1 0 1.313h-4.965c-.746 0-1.35.605-1.351 1.35v6.815c.001.745.605 1.35 1.35 1.35h3.9c.16 0 .314.058.434.164l3.297 2.91-.966-2.149a.656.656 0 0 1 .598-.925h1.888c.724 0 1.31-.588 1.311-1.312V8.601c0-.746-.605-1.35-1.35-1.351h-.946a.656.656 0 0 1 0-1.313h.946A2.666 2.666 0 0 1 23 8.601v6.852a2.627 2.627 0 0 1-2.624 2.624Zm-4.595-3.936c.183 0 .338.066.466.197.127.13.19.284.19.459 0 .18-.063.335-.19.463a.63.63 0 0 1-.466.193.632.632 0 0 1-.465-.192.635.635 0 0 1-.19-.464c0-.175.063-.328.19-.46a.626.626 0 0 1 .465-.196Zm.61-1.35-.082.693h-1.002l-.075-1.435h.142c.473 0 .83-.087 1.072-.261a.835.835 0 0 0 .363-.718c0-.255-.08-.457-.242-.604-.161-.146-.392-.22-.693-.22-.234 0-.448.067-.642.2-.195.133-.326.339-.393.616l-1.027-.367c.093-.416.334-.786.681-1.044.19-.14.403-.248.63-.318.24-.076.506-.114.802-.114.339 0 .642.043.91.13.267.087.492.208.675.363.184.155.325.341.422.559.1.226.149.471.146.718 0 .489-.147.884-.442 1.187-.295.301-.71.506-1.244.615Z"/>
   </symbol>
+  <symbol id="search" viewBox="0 0 24 24" fill="currentColor">
+    <path fill-rule="evenodd" d="M11.964 11.966a4.42 4.42 0 0 0 1.304-3.148.61.61 0 0 0-1.219 0 3.21 3.21 0 0 1-.947 2.286 3.21 3.21 0 0 1-2.286.947.61.61 0 0 0 0 1.219 4.42 4.42 0 0 0 3.148-1.304Zm-7.97 1.673a6.799 6.799 0 0 0 4.822 1.994 6.8 6.8 0 0 0 4.369-1.585l7.275 7.274a.606.606 0 0 0 .862 0 .61.61 0 0 0 0-.862l-7.275-7.273a6.763 6.763 0 0 0 1.588-4.37c0-1.82-.71-3.532-1.997-4.82a6.74 6.74 0 0 0-4.972-1.995.61.61 0 0 0-.596.622.6.6 0 0 0 .623.597 5.565 5.565 0 0 1 4.083 1.638 5.562 5.562 0 0 1 1.64 3.959 5.562 5.562 0 0 1-1.64 3.96 5.608 5.608 0 0 1-7.92 0 5.606 5.606 0 0 1 .88-8.637.61.61 0 0 0-.673-1.017 6.825 6.825 0 0 0-1.07 10.515Z" clip-rule="evenodd"/>
+  </symbol>
 </svg>