diff --git a/build/vnu-jar.mjs b/build/vnu-jar.mjs
index e55e99150b..3968927b56 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 ab6eb7aa4e..05f2c73a6e 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -627,7 +627,7 @@ fieldset {
   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.
diff --git a/site/src/components/shortcodes/ComponentCard.astro b/site/src/components/shortcodes/ComponentCard.astro
index 23f6c257bc..647bc893cc 100644
--- a/site/src/components/shortcodes/ComponentCard.astro
+++ b/site/src/components/shortcodes/ComponentCard.astro
@@ -18,7 +18,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..eccc763b9d
--- /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="md:d-flex align-items-center gap-xsmall" data-alpha-filter>
+      <legend class="md:my-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 sm:row-cols-2 xl:row-cols-3 2xl:row-cols-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 55068d8845..d67a3d4b31 100644
--- a/site/src/content/docs/components.mdx
+++ b/site/src/content/docs/components.mdx
@@ -6,6 +6,9 @@ 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'
@@ -23,11 +26,11 @@ import { getVersionedDocsPath } from '@libs/path'
 
 ## Alphabetical order
 
-<ul class="list-unstyled row gy-large row-cols-1 sm:row-cols-2 xl:row-cols-3 2xl:row-cols-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 d6c8a29179..3538787f37 100644
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -15,6 +15,7 @@ export declare global {
   export const Code: typeof import('@shortcodes/Code.astro').default
   export const ColorTable: typeof import('@shortcodes/ColorTable.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 Details: typeof import('@shortcodes/Details.astro').default
   export const EnableBtnCloseTooltip: typeof import('@shortcodes/EnableBtnCloseTooltip.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 f55ea3bd3a..16b5be1beb 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
@@ -162,6 +162,9 @@
   <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>
   <!-- Placeholders for navbars -->
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="buy">
     <path d="M883.53 387.9H662V273.033C662 185.015 590.5 113 502.5 113S343 185.015 343 273.033V387.9H115a50.016 50.016 0 0 0-42.88 75.736L265 888h465l196.41-424.367c4.52-7.512 8.59-16.314 8.59-25.726 0-27.615-23.85-50.007-51.47-50.007M165 487.918h175l19.23 125.025H223.95Zm150 325.066-60-125.025h115.77L390 812.984zm225 0h-80l-20-125.025h120Zm30-200.041H435l-20-125.025h170ZM586.99 387.9H418.05l-.13-114.864a84.556 84.556 0 1 1 169.11 0ZM685 812.984h-75.31L630 687.959h115Zm91.05-200.041H639.3L655 487.918h175.17Z" style="fill-rule:evenodd"/>
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 f55ea3bd3a..16b5be1beb 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
@@ -162,6 +162,9 @@
   <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>
   <!-- Placeholders for navbars -->
   <symbol fill="currentColor" viewBox="0 0 1000 1000" id="buy">
     <path d="M883.53 387.9H662V273.033C662 185.015 590.5 113 502.5 113S343 185.015 343 273.033V387.9H115a50.016 50.016 0 0 0-42.88 75.736L265 888h465l196.41-424.367c4.52-7.512 8.59-16.314 8.59-25.726 0-27.615-23.85-50.007-51.47-50.007M165 487.918h175l19.23 125.025H223.95Zm150 325.066-60-125.025h115.77L390 812.984zm225 0h-80l-20-125.025h120Zm30-200.041H435l-20-125.025h170ZM586.99 387.9H418.05l-.13-114.864a84.556 84.556 0 1 1 169.11 0ZM685 812.984h-75.31L630 687.959h115Zm91.05-200.041H639.3L655 487.918h175.17Z" style="fill-rule:evenodd"/>
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 bc4618bc99..5e1097c37d 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
@@ -139,6 +139,9 @@
   <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>
   <!-- Placeholders for navbars -->
   <symbol fill="currentColor" viewBox="0 0 24 24" id="buy">
     <path d="M19.398 10.498c-.352-2.226-2.173-2.564-3.36-2.616l-.245-2.186C15.66 4.418 14.663 2 11.86 2 9.322 2 8.392 4.186 8.253 5.35l-.266 2.522h-.721c-1.789 0-2.345 1.47-2.608 2.577L3.01 20.162l-.009.11C3 21.775 4.178 23 5.625 23h12.469c1.447 0 2.625-1.224 2.625-2.729l-1.32-9.773Zm-1.304 11.19H5.625c-.708 0-1.287-.608-1.312-1.366l1.627-9.59c.344-1.428.843-1.548 1.326-1.548h.583l-.252 2.384a.656.656 0 0 0 1.306.138l.266-2.522h2.528a.656.656 0 1 0 0-1.312h-2.39l.251-2.375c.01-.09.283-2.185 2.301-2.185 2.276 0 2.6 2.266 2.63 2.526l.656 5.872a.656.656 0 1 0 1.304-.146l-.264-2.36c.978.07 1.736.358 1.915 1.485l1.306 9.623c-.02.762-.601 1.375-1.312 1.375Z" style="fill-rule:evenodd"/>