diff --git a/.changeset/mean-apples-joke.md b/.changeset/mean-apples-joke.md
new file mode 100644
index 0000000000..fae72edb81
--- /dev/null
+++ b/.changeset/mean-apples-joke.md
@@ -0,0 +1,5 @@
+---
+"@studiocms/ui": patch
+---
+
+Added a new searchable select component and improved accessibility for normal selects
diff --git a/packages/studiocms_ui/src/components.ts b/packages/studiocms_ui/src/components.ts
index df22549c85..09998d4fc9 100644
--- a/packages/studiocms_ui/src/components.ts
+++ b/packages/studiocms_ui/src/components.ts
@@ -11,6 +11,7 @@ export { Toaster, toast } from './components/index';
 export { Card } from './components/index';
 export { Modal, ModalHelper } from './components/index';
 export { Select } from './components/index';
+export { SearchSelect } from './components/index';
 export { Dropdown, DropdownHelper } from './components/index';
 export { User } from './components/index';
 export { ThemeToggle } from './components/index';
diff --git a/packages/studiocms_ui/src/components/Button.astro b/packages/studiocms_ui/src/components/Button.astro
index da41519dde..0fe8643fd7 100644
--- a/packages/studiocms_ui/src/components/Button.astro
+++ b/packages/studiocms_ui/src/components/Button.astro
@@ -36,6 +36,7 @@ const {
   ]}
   disabled={disabled}
   {...props}
+	tabindex={0}
 >
   <slot name="start-content" />
   <slot />
diff --git a/packages/studiocms_ui/src/components/SearchSelect.astro b/packages/studiocms_ui/src/components/SearchSelect.astro
new file mode 100644
index 0000000000..93d3a4fe18
--- /dev/null
+++ b/packages/studiocms_ui/src/components/SearchSelect.astro
@@ -0,0 +1,430 @@
+---
+import Icon from "../utils/Icon.astro";
+import { generateID } from "../utils/generateID";
+import Input from "./Input.astro";
+
+type Option = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+
+type Props = {
+    label?: string;
+    defaultValue?: string;
+    class?: string;
+    name?: string;
+    isRequired?: boolean;
+    options: Option[];
+    disabled?: boolean;
+    fullWidth?: boolean;
+};
+
+const {
+    label,
+    defaultValue,
+    class: className,
+    name = generateID("search-select"),
+    isRequired,
+    options = [],
+    disabled,
+    fullWidth,
+} = Astro.props;
+---
+
+<div
+    id={`${name}-container`}
+    class="search-select-label"
+    class:list={[disabled && "disabled", className, fullWidth && "full"]}
+>
+    <label class="label" for={`${name}-search-select-btn`}>
+        {label}
+        <span class="req-star">{isRequired && "*"}</span>
+    </label>
+    <div class="search-input-wrapper" id={`${name}-search-input-wrapper`}>
+        <Input
+            placeholder={options.find((x) => x.value === defaultValue)?.label || "Select"}
+        />
+        <Icon name="chevron-up-down" class="search-select-indicator" width={20} height={20} />
+    </div>
+    <ul class="search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+        {
+            options.map((x, i) => (
+                <li
+                    class="search-select-option"
+                    role="option"
+                    value={x.value}
+                    class:list={[
+                        x.disabled && "disabled",
+                        i === 0 && 'focused',
+                    ]}
+                    id={defaultValue === x.value ? `${name}-selected` : ""}
+                    data-option-index={i}
+                    data-value={x.value}
+                >
+                    {x.label}
+                </li>
+            ))
+        }
+    </ul>
+    <select class="hidden-select" id={name} name={name} required={isRequired}>
+        <option value={""}> Select </option>
+        {
+            options.map((x) => (
+                <option
+                    value={x.value}
+                    selected={defaultValue === x.value}
+                    disabled={x.disabled}
+                >
+                    {x.label}
+                </option>
+            ))
+        }
+    </select>
+</div>
+<script is:inline define:vars={{ id: name, options, defaultValue }}>
+    const container = document.getElementById(`${id}-container`);
+    const hiddenSelect = document.getElementById(id);
+    const searchWrapper = document.getElementById(`${id}-search-input-wrapper`);
+    const searchInput = searchWrapper.querySelector('input');
+    const valueSpan = document.getElementById(`${id}-value-span`);
+    const dropdown = document.getElementById(`${id}-dropdown`);
+    let optionElements = container.querySelectorAll("li");
+
+    let active = false;
+
+    let filteredOptions = options;
+
+    searchWrapper.addEventListener("click", () => {
+        const { bottom, left, right, width, x, y, height } = searchWrapper.getBoundingClientRect();
+
+        const optionHeight = 36;
+        const totalBorderSize = 2;
+        const margin = 4;
+
+        const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
+
+        const CustomRect = {
+            top: bottom + margin,
+            left,
+            right,
+            bottom: bottom + margin + dropdownHeight,
+            width,
+            height: dropdownHeight,
+            x,
+            y: y + height + margin,
+        };
+
+        if (active) {
+            dropdown.classList.remove("active", "above");
+            active = false;
+            return;
+        }
+
+        active = true;
+
+        if (
+            CustomRect.top >= 0 &&
+            CustomRect.left >= 0 &&
+            CustomRect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            CustomRect.right <=
+                (window.innerWidth || document.documentElement.clientWidth)
+        ) {
+            dropdown.classList.add("active");
+        } else {
+            dropdown.classList.add("active", "above");
+        }
+    });
+
+    const handleSelection = (e, option) => {
+        e.stopImmediatePropagation();
+        
+        if (option.id === `${id}-selected` || !id) return;
+
+        const currentlySelected = document.getElementById(`${id}-selected`);
+
+        if (currentlySelected) {
+            currentlySelected.classList.remove("selected");
+            currentlySelected.id = "";
+        }
+
+        option.id = `${id}-selected`;
+        option.classList.add("selected");
+
+        const index = options.findIndex((x) => x.value === option.dataset.value);
+        focusIndex = index;
+
+        const opt = options[index];
+        hiddenSelect.value = opt.value;
+
+        searchInput.placeholder = opt.label;
+        dropdown.classList.remove("active", "above");
+        searchInput.blur();
+
+        searchInput.value = "";
+        filteredOptions = options;
+        constructOptionsBasedOnOptions(options);
+
+        active = false;
+    }
+
+    optionElements.forEach((option) => {
+        option.addEventListener("click", (e) => handleSelection(e, option));
+    });
+
+    window.addEventListener("scroll", () => {
+        dropdown.classList.remove("active", "above");
+        active = false;
+    });
+
+    hideOnClickOutside(container);
+
+    function hideOnClickOutside(element) {
+        const outsideClickListener = (event) => {
+            if (
+                !element.contains(event.target) &&
+                isVisible(element) &&
+                active === true
+            ) {
+                // or use: event.target.closest(selector) === null
+                dropdown.classList.remove("active", "above");
+                active = false;
+            }
+        };
+
+        const removeClickListener = () => {
+            document.removeEventListener("click", outsideClickListener);
+        };
+
+        document.addEventListener("click", outsideClickListener);
+    }
+
+    // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
+    const isVisible = (elem) =>
+        !!elem &&
+        !!(
+            elem.offsetWidth ||
+            elem.offsetHeight ||
+            elem.getClientRects().length
+        );
+
+    let focusIndex = 0;
+
+    const recomputeOptions = () => {
+        for (const entry of optionElements) {
+            if (entry.dataset.optionIndex == focusIndex) {
+                entry.classList.add('focused');
+            } else {
+                entry.classList.remove('focused');
+            }
+        }
+    }
+
+    searchInput.addEventListener('keydown', (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+
+            active = false;
+            dropdown.classList.remove("active", "above");
+            searchInput.blur();
+            
+            return;
+        }
+
+        if (e.key === "ArrowUp" && focusIndex > 0) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+
+            focusIndex--;
+            recomputeOptions();
+
+            return;
+        }
+
+        if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter(x => !x.disabled).length) {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+
+            focusIndex++;
+            recomputeOptions();
+
+            return;
+        }
+
+        if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+
+            console.log(optionElements, focusIndex);
+
+            for (const entry of optionElements) {
+                if (entry.dataset.optionIndex == focusIndex) {
+                    entry.click();
+                }
+            }
+
+            return;
+        }
+    });
+
+    searchInput.addEventListener('keyup', (e) => {
+        if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+
+        if (searchInput.value.trim().length === 0) {
+            constructOptionsBasedOnOptions(options);
+            filteredOptions = options;
+            return;
+        };
+
+        filteredOptions = options.filter(x => x.label.includes(searchInput.value));
+        focusIndex = 0;
+
+        constructOptionsBasedOnOptions(filteredOptions);
+    });
+
+    function constructOptionsBasedOnOptions(options) {
+        dropdown.innerHTML = '';
+
+        if (options.length === 0) {
+            const element = document.createElement('li');
+            element.classList.add('empty-search-results');
+            element.textContent = "No results found.";
+
+            dropdown.appendChild(element);
+        }
+
+        let i = 0;
+
+        for (const option of options) {
+            const element = document.createElement('li');
+            element.classList.add(...[
+                'search-select-option', 
+                option.disabled && "disabled",
+                focusIndex === i && 'focused',
+            ].filter(Boolean));
+            element.role = "option";
+            element.value = option.value;
+            element.id = "";
+            element.dataset.optionIndex = i;
+            element.dataset.value = option.value;
+            element.textContent = option.label;
+
+            element.addEventListener("click", (e) => handleSelection(e, element));
+
+            dropdown.appendChild(element);
+
+            i++;
+        }
+
+        optionElements = container.querySelectorAll("li");
+    }
+</script>
+<style is:global>
+    .search-select-label {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        min-width: 200px;
+        position: relative;
+    }
+
+    .search-select-label.full {
+        width: 100%;
+    }
+
+    .search-select-label.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
+
+    .label {
+        font-size: 14px;
+    }
+
+    .req-star {
+        color: hsl(var(--danger-base));
+        font-weight: 700;
+    }
+
+    .search-select-dropdown {
+        position: absolute;
+        width: 100%;
+        border: 1px solid hsl(var(--border));
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        flex-direction: column;
+        border-radius: 0.5rem;
+        background-color: hsl(var(--background-step-2));
+        overflow: hidden;
+        top: calc(100% + 0.25rem);
+        left: 0;
+        display: none;
+        z-index: 90;
+        box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+    }
+
+    .search-select-dropdown.above {
+        top: auto;
+        bottom: calc(100% - 18px + 0.25rem);
+    }
+
+    .search-select-option, .empty-search-results {
+        padding: 0.5rem;
+        cursor: pointer;
+        font-size: 0.975em;
+        transition: all 0.15s ease;
+    }
+
+    .search-select-option.disabled {
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
+
+    .search-select-option:hover, .search-select-option.focused {
+        background-color: hsl(var(--background-step-3));
+    }
+
+    .search-select-option.selected {
+        background-color: hsl(var(--primary-base));
+        color: hsl(var(--text-inverted));
+        cursor: default;
+    }
+
+    .hidden-select {
+        height: 0;
+        width: 0;
+        border: none;
+        outline: none;
+        position: absolute;
+        background-color: transparent;
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    .search-input-wrapper {
+        width: 100%;
+        position: relative;
+        height: fit-content;
+        cursor: pointer;
+    }
+
+    .search-select-indicator {
+        position: absolute;
+        top: calc(65% + 1px);
+        transform: translateY(-65%);
+        right: .5rem;
+    }
+
+    .search-input-wrapper:has(input:focus) + .search-select-dropdown {
+        display: flex;
+    }
+
+    .search-select-dropdown.active, .search-select-dropdown:has(> li:active) {
+        display: flex;
+    }
+</style>
diff --git a/packages/studiocms_ui/src/components/Select.astro b/packages/studiocms_ui/src/components/Select.astro
index 62e9b5d75b..36c436fd8f 100644
--- a/packages/studiocms_ui/src/components/Select.astro
+++ b/packages/studiocms_ui/src/components/Select.astro
@@ -1,292 +1,334 @@
 ---
-import Icon from '../utils/Icon.astro';
-import { generateID } from '../utils/generateID';
+import Icon from "../utils/Icon.astro";
+import { generateID } from "../utils/generateID";
 
 type Option = {
-	label: string;
-	value: string;
-	disabled?: boolean;
+    label: string;
+    value: string;
+    disabled?: boolean;
 };
 
 type Props = {
-	label?: string;
-	defaultValue?: string;
-	class?: string;
-	name?: string;
-	isRequired?: boolean;
-	options: Option[];
-	disabled?: boolean;
-	fullWidth?: boolean;
+    label?: string;
+    defaultValue?: string;
+    class?: string;
+    name?: string;
+    isRequired?: boolean;
+    options: Option[];
+    disabled?: boolean;
+    fullWidth?: boolean;
 };
 
 const {
-	label,
-	defaultValue,
-	class: className,
-	name = generateID('dropdown'),
-	isRequired,
-	options = [],
-	disabled,
-	fullWidth,
+    label,
+    defaultValue,
+    class: className,
+    name = generateID("select"),
+    isRequired,
+    options = [],
+    disabled,
+    fullWidth,
 } = Astro.props;
 ---
 
-<div id={`${name}-container`} class="select-label" class:list={[disabled && "disabled", className, fullWidth && "full"]}>
-  <label class="label" for={`${name}-select-btn`}>
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </label>
-  <button
-    class="select-button"
-    role="combobox"
-    id={`${name}-select-btn`}
-    type="button"
-  >
-    <span id={`${name}-value-span`}>{defaultValue ? options.find(x => x.value === defaultValue)?.label : "Select"}</span>
-    <Icon name='chevron-up-down' width={20} height={20} />
-  </button>
-  <ul class="select-dropdown" role="listbox" id={`${name}-dropdown`}>
-    {options.map((x, i) => (
-      <li 
-        class="select-option"
-        role="option"
-        value={x.value}
-        class:list={[defaultValue === x.value && `selected`, x.disabled && "disabled"]}
-        id={defaultValue === x.value ? `${name}-selected` : ''}
-        data-option-index={i}
-      >
-        {x.label}
-      </li>
-    ))}
-  </ul>
-  <select class="hidden-select" id={name} name={name} required={isRequired}>
-    <option 
-      value={''}
+<div
+    id={`${name}-container`}
+    class="select-label"
+    class:list={[disabled && "disabled", className, fullWidth && "full"]}
+>
+    <label class="label" for={`${name}-select-btn`}>
+        {label}
+        <span class="req-star">{isRequired && "*"}</span>
+    </label>
+    <button
+        class="select-button"
+        role="combobox"
+        id={`${name}-select-btn`}
+        type="button"
     >
-      Select
-    </option>
-    {options.map((x) => (
-      <option 
-        value={x.value}
-        selected={defaultValue === x.value}
-        disabled={x.disabled}
-      >
-        {x.label}
-      </option>
-    ))}
-  </select>
+        <span id={`${name}-value-span`}>
+            {
+                defaultValue
+                    ? options.find((x) => x.value === defaultValue)?.label
+                    : "Select"
+            }
+        </span>
+        <Icon name="chevron-up-down" width={20} height={20} />
+    </button>
+    <ul class="select-dropdown" role="listbox" id={`${name}-dropdown`}>
+        {
+            options.map((x, i) => (
+                <li
+                    class="select-option"
+                    role="option"
+                    value={x.value}
+                    class:list={[
+                        defaultValue === x.value && `selected`,
+                        x.disabled && "disabled",
+                    ]}
+                    id={defaultValue === x.value ? `${name}-selected` : ""}
+                    data-option-index={i}
+                    tabindex={x.disabled ? -1 : 0}
+                >
+                    {x.label}
+                </li>
+            ))
+        }
+    </ul>
+    <select class="hidden-select" id={name} name={name} required={isRequired}>
+        <option value={""}> Select </option>
+        {
+            options.map((x) => (
+                <option
+                    value={x.value}
+                    selected={defaultValue === x.value}
+                    disabled={x.disabled}
+                >
+                    {x.label}
+                </option>
+            ))
+        }
+    </select>
 </div>
 <script is:inline define:vars={{ id: name, options }}>
-  const container = document.getElementById(`${id}-container`);
-  const hiddenSelect = document.getElementById(id);
-  const button = document.getElementById(`${id}-select-btn`);
-  const valueSpan = document.getElementById(`${id}-value-span`);
-  const dropdown = document.getElementById(`${id}-dropdown`);
-  const optionElements = container.querySelectorAll('li');
-
-  let active = false;
-
-  button.addEventListener('click', () => {
-    const { bottom, left, right, width, x, y, height } = button.getBoundingClientRect();
-
-    const optionHeight = 36;
-    const totalBorderSize = 2;
-    const margin = 4;
-    
-    const dropdownHeight = ((options.length * optionHeight) + totalBorderSize + margin);
-
-    const CustomRect = {
-      top: bottom + margin,
-      left,
-      right,
-      bottom: bottom + margin + dropdownHeight,
-      width,
-      height: dropdownHeight,
-      x,
-      y: y + height + margin,
-    };
-
-    if (active) {
-      dropdown.classList.remove('active', 'above');
-      active = false;
-      return;
+    const container = document.getElementById(`${id}-container`);
+    const hiddenSelect = document.getElementById(id);
+    const button = document.getElementById(`${id}-select-btn`);
+    const valueSpan = document.getElementById(`${id}-value-span`);
+    const dropdown = document.getElementById(`${id}-dropdown`);
+    const optionElements = container.querySelectorAll("li");
+
+    let active = false;
+
+    button.addEventListener("click", () => {
+        const { bottom, left, right, width, x, y, height } =
+            button.getBoundingClientRect();
+
+        const optionHeight = 36;
+        const totalBorderSize = 2;
+        const margin = 4;
+
+        const dropdownHeight =
+            options.length * optionHeight + totalBorderSize + margin;
+
+        const CustomRect = {
+            top: bottom + margin,
+            left,
+            right,
+            bottom: bottom + margin + dropdownHeight,
+            width,
+            height: dropdownHeight,
+            x,
+            y: y + height + margin,
+        };
+
+        if (active) {
+            dropdown.classList.remove("active", "above");
+            active = false;
+            return;
+        }
+
+        active = true;
+
+        if (
+            CustomRect.top >= 0 &&
+            CustomRect.left >= 0 &&
+            CustomRect.bottom <=
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            CustomRect.right <=
+                (window.innerWidth || document.documentElement.clientWidth)
+        ) {
+            dropdown.classList.add("active");
+        } else {
+            dropdown.classList.add("active", "above");
+        }
+    });
+
+    optionElements.forEach((option) => {
+        const handleSelection = (e) => {
+            e.stopImmediatePropagation();
+            if (option.id === `${id}-selected` || !id) return;
+
+            const currentlySelected = document.getElementById(`${id}-selected`);
+
+            if (currentlySelected) {
+                currentlySelected.classList.remove("selected");
+                currentlySelected.id = "";
+            }
+
+            option.id = `${id}-selected`;
+            option.classList.add("selected");
+
+            const opt = options[parseInt(option.dataset.optionIndex)];
+            hiddenSelect.value = opt.value;
+
+            valueSpan.textContent = opt.label;
+            dropdown.classList.remove("active", "above");
+
+            active = false;
+        }
+
+        option.addEventListener("click", handleSelection);
+        option.addEventListener("keydown", (e) => {
+            if (e.key === 'Enter') {
+                handleSelection(e);
+            }
+        });
+    });
+
+    window.addEventListener("scroll", () => {
+        dropdown.classList.remove("active", "above");
+        active = false;
+    });
+
+    hideOnClickOutside(container);
+
+    function hideOnClickOutside(element) {
+        const outsideClickListener = (event) => {
+            if (
+                !element.contains(event.target) &&
+                isVisible(element) &&
+                active === true
+            ) {
+                // or use: event.target.closest(selector) === null
+                dropdown.classList.remove("active", "above");
+                active = false;
+            }
+        };
+
+        const removeClickListener = () => {
+            document.removeEventListener("click", outsideClickListener);
+        };
+
+        document.addEventListener("click", outsideClickListener);
     }
 
-    active = true;
-
-    if (
-      CustomRect.top >= 0 &&
-      CustomRect.left >= 0 &&
-      CustomRect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
-      CustomRect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    ) {
-      dropdown.classList.add('active');
-    } else {
-      dropdown.classList.add('active', 'above');
+    // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
+    const isVisible = (elem) =>
+        !!elem &&
+        !!(
+            elem.offsetWidth ||
+            elem.offsetHeight ||
+            elem.getClientRects().length
+        );
+</script>
+<style>
+    .select-label {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        min-width: 200px;
+        position: relative;
     }
-  });
-
-  optionElements.forEach((option) => {
-    option.addEventListener('click', (e) => {
-      e.stopImmediatePropagation();
-      if (option.id === `${id}-selected` || !id) return;
-
-      const currentlySelected = document.getElementById(`${id}-selected`);
-      
-      if (currentlySelected) {
-        currentlySelected.classList.remove('selected');
-        currentlySelected.id = '';
-      }
-
-      option.id = `${id}-selected`;
-      option.classList.add('selected');
-
-      const opt = options[parseInt(option.dataset.optionIndex)];
-      hiddenSelect.value = opt.value;
-      
-      valueSpan.textContent = opt.label;
-      dropdown.classList.remove('active', 'above');
-
-      active = false;
-    });
-  });
 
-  window.addEventListener('scroll', () => {
-    dropdown.classList.remove('active', 'above');
-    active = false;
-  });
+    .select-label.full {
+        width: 100%;
+    }
 
-  hideOnClickOutside(container);
+    .select-label.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
 
-  function hideOnClickOutside(element) {
-    const outsideClickListener = (event) => {
-      if (!element.contains(event.target) && isVisible(element) && active === true) { // or use: event.target.closest(selector) === null
-        dropdown.classList.remove('active', 'above');
-        active = false;
-      }
+    .label {
+        font-size: 14px;
     }
 
-    const removeClickListener = () => {
-      document.removeEventListener('click', outsideClickListener);
+    .req-star {
+        color: hsl(var(--danger-base));
+        font-weight: 700;
     }
 
-    document.addEventListener('click', outsideClickListener);
-  }
+    .select-button {
+        padding: 0.5rem 0.75rem 0.5rem 1rem;
+        border-radius: 8px;
+        border: 1px solid hsl(var(--border));
+        background: hsl(var(--background-step-2));
+        color: hsl(var(--text-normal));
+        transition: all 0.15s ease;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+        gap: 1rem;
+    }
 
-  // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 
-  const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
-</script>
-<style>
-  .select-label {
-    width: fit-content;
-    display: flex;
-    flex-direction: column;
-    gap: .25rem;
-    min-width: 200px;
-    position: relative;
-  }
-
-  .select-label.full {
-    width: 100%;
-  }
-
-  .select-label.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    color: hsl(var(--text-muted));
-  }
-
-  .label {
-    font-size: 14px;
-  }
-
-  .req-star {
-    color: hsl(var(--danger-base));
-    font-weight: 700;
-  }
-
-  .select-button {
-    padding: .5rem .75rem .5rem 1rem;
-    border-radius: 8px;
-    border: 1px solid hsl(var(--border));
-    background: hsl(var(--background-step-2));
-    color: hsl(var(--text-normal));
-    transition: all .15s ease;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    gap: 1rem;
-  }
-
-  .select-button:hover {
-    background: hsl(var(--background-step-3));
-  }
-
-  .select-button.active,
-  .select-button:active,
-  .select-button:has(+ .select-dropdown.active) {
-    border: 1px solid hsl(var(--primary-base));
-    background: hsl(var(--background-step-2));
-  }
-
-  .select-dropdown {
-    position: absolute;
-    width: 100%;
-    border: 1px solid hsl(var(--border));
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    flex-direction: column;
-    border-radius: .5rem;
-    background-color: hsl(var(--background-step-2));
-    overflow: hidden;
-    top: calc(100% + .25rem);
-    left: 0;
-    display: none;
-    z-index: 90;
-    box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
-  }
-
-  .select-dropdown.active {
-    display: flex;
-  }
-
-  .select-dropdown.above {
-    top: auto;
-    bottom: calc(100% - 18px + .25rem);
-  }
-
-  .select-option {
-    padding: .5rem;
-    cursor: pointer;
-    font-size: .975em;
-    transition: all .15s ease;
-  }
-
-  .select-option.disabled {
-    pointer-events: none;
-    color: hsl(var(--text-muted));
-  }
-
-  .select-option:hover {
-    background-color: hsl(var(--background-step-3));
-  }
-
-  .select-option.selected {
-    background-color: hsl(var(--primary-base));
-    color: hsl(var(--text-inverted));
-    cursor: default;
-  }
-
-  .hidden-select {
-    height: 0;
-    width: 0;
-    border: none;
-    outline: none;
-    position: absolute;
-    background-color: transparent;
-    pointer-events: none;
-    opacity: 0;
-  }
+    .select-button:hover {
+        background: hsl(var(--background-step-3));
+    }
+
+    .select-button.active,
+    .select-button:active,
+    .select-button:has(+ .select-dropdown.active) {
+        border: 1px solid hsl(var(--primary-base));
+        background: hsl(var(--background-step-2));
+    }
+
+    .select-dropdown {
+        position: absolute;
+        width: 100%;
+        border: 1px solid hsl(var(--border));
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        flex-direction: column;
+        border-radius: 0.5rem;
+        background-color: hsl(var(--background-step-2));
+        overflow: hidden;
+        top: calc(100% + 0.25rem);
+        left: 0;
+        display: none;
+        z-index: 90;
+        box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
+    }
+
+    .select-dropdown.active {
+        display: flex;
+    }
+
+    .select-dropdown.above {
+        top: auto;
+        bottom: calc(100% - 18px + 0.25rem);
+    }
+
+    .select-option {
+        padding: 0.5rem;
+        cursor: pointer;
+        font-size: 0.975em;
+        transition: all 0.15s ease;
+    }
+
+    .select-option.disabled {
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
+
+    .select-option:hover, .select-option:focus {
+        background-color: hsl(var(--background-step-3));
+    }
+
+    .select-option:focus {
+        outline: none;
+        border: none;
+    }
+
+    .select-option.selected {
+        background-color: hsl(var(--primary-base));
+        color: hsl(var(--text-inverted));
+        cursor: default;
+    }
+
+    .hidden-select {
+        height: 0;
+        width: 0;
+        border: none;
+        outline: none;
+        position: absolute;
+        background-color: transparent;
+        pointer-events: none;
+        opacity: 0;
+    }
 </style>
diff --git a/packages/studiocms_ui/src/components/index.ts b/packages/studiocms_ui/src/components/index.ts
index cc28e543eb..46bf1c7e1a 100644
--- a/packages/studiocms_ui/src/components/index.ts
+++ b/packages/studiocms_ui/src/components/index.ts
@@ -1,24 +1,25 @@
-export { default as Button } from './Button.astro';
-export { default as Divider } from './Divider.astro';
-export { default as Input } from './Input.astro';
-export { default as Row } from './Row.astro';
-export { default as Center } from './Center.astro';
-export { default as Textarea } from './Textarea.astro';
-export { default as Checkbox } from './Checkbox.astro';
-export { default as Toggle } from './Toggle.astro';
-export { default as RadioGroup } from './RadioGroup.astro';
-export { default as Toaster } from './Toast/Toaster.astro';
-export { default as Card } from './Card.astro';
-export { default as Modal } from './Modal/Modal.astro';
-export { default as Select } from './Select.astro';
-export { default as Dropdown } from './Dropdown/Dropdown.astro';
-export { default as User } from './User.astro';
+export { default as Button } from "./Button.astro";
+export { default as Divider } from "./Divider.astro";
+export { default as Input } from "./Input.astro";
+export { default as Row } from "./Row.astro";
+export { default as Center } from "./Center.astro";
+export { default as Textarea } from "./Textarea.astro";
+export { default as Checkbox } from "./Checkbox.astro";
+export { default as Toggle } from "./Toggle.astro";
+export { default as RadioGroup } from "./RadioGroup.astro";
+export { default as Toaster } from "./Toast/Toaster.astro";
+export { default as Card } from "./Card.astro";
+export { default as Modal } from "./Modal/Modal.astro";
+export { default as Select } from "./Select.astro";
+export { default as SearchSelect } from "./SearchSelect.astro";
+export { default as Dropdown } from "./Dropdown/Dropdown.astro";
+export { default as User } from "./User.astro";
 export { default as ThemeToggle } from './ThemeToggle.astro';
 
-export { default as Sidebar } from './Sidebar/Single.astro';
-export { default as DoubleSidebar } from './Sidebar/Double.astro';
-export { SingleSidebarHelper, DoubleSidebarHelper } from './Sidebar/helpers';
+export { default as Sidebar } from "./Sidebar/Single.astro";
+export { default as DoubleSidebar } from "./Sidebar/Double.astro";
+export { SingleSidebarHelper, DoubleSidebarHelper } from "./Sidebar/helpers";
 
-export { toast } from './Toast/toast';
-export { ModalHelper } from './Modal/modal';
-export { DropdownHelper } from './Dropdown/dropdown';
+export { toast } from "./Toast/toast";
+export { ModalHelper } from "./Modal/modal";
+export { DropdownHelper } from "./Dropdown/dropdown";
diff --git a/packages/studiocms_ui/src/css/global.css b/packages/studiocms_ui/src/css/global.css
index a3ab334447..db1e321a53 100644
--- a/packages/studiocms_ui/src/css/global.css
+++ b/packages/studiocms_ui/src/css/global.css
@@ -1,4 +1,2 @@
 @import url("./colors.css");
-@import url("./sizes.css");
 @import url("./resets.css");
-@import url("./spacings.css");
diff --git a/packages/studiocms_ui/src/css/sizes.css b/packages/studiocms_ui/src/css/sizes.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/studiocms_ui/src/css/spacings.css b/packages/studiocms_ui/src/css/spacings.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/playgrounds/ui/src/components/SearchSelectTests.astro b/playgrounds/ui/src/components/SearchSelectTests.astro
new file mode 100644
index 0000000000..dfa2261809
--- /dev/null
+++ b/playgrounds/ui/src/components/SearchSelectTests.astro
@@ -0,0 +1,50 @@
+---
+import { Row, SearchSelect } from '@studiocms/ui/components';
+---
+<Row>
+  <SearchSelect
+    label='Required Select'
+    options={[
+      { label: "Option 1", value: "sopt-1-1" },
+      { label: "Option 2", value: "sopt-2-1" },
+      { label: "Option 3", value: "sopt-3-1" },
+    ]}
+    isRequired
+  />
+  <SearchSelect
+    label='Select with default value'
+    options={[
+      { label: "Option 1", value: "sopt-1-2" },
+      { label: "Option 2", value: "sopt-2-2" },
+      { label: "Option 3", value: "sopt-3-2" },
+    ]}
+    defaultValue='opt-1-2'
+  />
+  <SearchSelect
+    label='Select with disabled options'
+    options={[
+      { label: "Option 1", value: "sopt-1-3" },
+      { label: "Option 2", value: "sopt-2-3", disabled: true },
+      { label: "Option 3", value: "sopt-3-3", disabled: true },
+    ]}
+  />
+  <SearchSelect
+    label='Disabled Select'
+    options={[
+      { label: "Option 1", value: "sopt-1-4" },
+      { label: "Option 2", value: "sopt-2-4" },
+      { label: "Option 3", value: "sopt-3-4" },
+    ]}
+    disabled
+  />
+</Row>
+<SearchSelect
+  class='mt'
+  label='Full width select'
+  options={[
+    { label: "Option 1", value: "sopt-1-5" },
+    { label: "Option 2", value: "sopt-2-5" },
+    { label: "Option 3", value: "sopt-3-5" },
+  ]}
+  fullWidth
+/>
diff --git a/playgrounds/ui/src/pages/index.astro b/playgrounds/ui/src/pages/index.astro
index 620dfa6bb2..54d8fb163f 100644
--- a/playgrounds/ui/src/pages/index.astro
+++ b/playgrounds/ui/src/pages/index.astro
@@ -9,6 +9,7 @@ import CheckboxTests from '@/components/CheckboxTests.astro';
 import DropdownTests from '@/components/DropdownTests.astro';
 import ModalTests from '@/components/ModalTests.astro';
 import RadioGroupTests from '@/components/RadioGroupTests.astro';
+import SearchSelectTests from '@/components/SearchSelectTests.astro';
 import SelectTests from '@/components/SelectTests.astro';
 import ToastTests from '@/components/ToastTests.astro';
 import ToggleTests from '@/components/ToggleTests.astro';
@@ -100,6 +101,8 @@ import ButtonTests from '../components/ButtonTests.astro';
     <ModalTests />
     <h1>Select</h1>
     <SelectTests />
+    <h1>Search Select</h1>
+    <SearchSelectTests />
     <h1>Dropdown</h1>
     <DropdownTests />
     <h1>User</h1>
@@ -178,4 +181,4 @@ import ButtonTests from '../components/ButtonTests.astro';
       sunIcon.classList.remove('hidden');
     }
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/select-searchable.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/select-searchable.mdx
new file mode 100644
index 0000000000..4b4542c502
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/select-searchable.mdx
@@ -0,0 +1,159 @@
+---
+title: Select (Searchable)
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { SearchSelect } from '@studiocms/ui/components';
+
+A variation of the `<Select />` element that supports arrow keys and filtering.
+
+**Can be used as a drop-in replacement.**
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <SearchSelect
+        label='Select Element'
+        options={[
+          { label: "Option 1", value: "opt-1-1" },
+          { label: "Option 2", value: "opt-2-1" },
+          { label: "Option 3", value: "opt-3-1" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { SearchSelect } from '@studiocms/ui/components';
+    ---
+
+    <SearchSelect
+      label='Searchable Select Element'
+      options={[
+        { label: "Option 1", value: "opt-1" },
+        { label: "Option 2", value: "opt-2" },
+        { label: "Option 3", value: "opt-3" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Default Value
+
+You can set a default value using the `defaultValue` prop:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <SearchSelect
+        label='Searchable Select Element'
+        defaultValue='opt-1-1'
+        options={[
+          { label: "Option 1", value: "opt-1-1" },
+          { label: "Option 2", value: "opt-2-1" },
+          { label: "Option 3", value: "opt-3-1" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { SearchSelect } from '@studiocms/ui/components';
+    ---
+
+    <SearchSelect
+      label='Searchable Select Element'
+      defaultValue='opt-1'
+      options={[
+        { label: "Option 1", value: "opt-1" },
+        { label: "Option 2", value: "opt-2" },
+        { label: "Option 3", value: "opt-3" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+You can use the `isRequired` prop to mark the select input as required. This will also add a red `*` to
+the label.
+
+If you need to access the element's value later on, you can pass the `name` prop. It will then appear in any FormData
+you construct. If no name is set, a random one is generated for the component.
+
+Additionally, you can either disable the entire select input by using the `disabled` prop, or disable
+individual options by adding `disabled: true` to the option you want to disable:
+
+```astro ins={7-9}
+---
+import { SearchSelect } from '@studiocms/ui/components';
+---
+
+<SearchSelect
+  label='Searchable Select Element'
+  defaultValue='opt-1'
+  isRequired
+  disabled
+  name="searchable-select-element"
+  options={[
+    // ...
+    { 
+      label: "Option X", 
+      value: "opt-x", 
+      disabled: true // [!code ++]
+    },
+    // ...
+  ]}
+/>
+```
+
+
+### Full Width
+
+Normally, the input has a minimum width and extends as needed. You can force it to take up
+the entire width of its parent container by setting the `fullWidth` prop to true:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <SearchSelect
+        label='Searchable Select Element'
+        fullWidth
+        options={[
+          { label: "Option 1", value: "f-opt-1-1" },
+          { label: "Option 2", value: "f-opt-1-2" },
+          { label: "Option 3", value: "f-opt-1-3" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { SearchSelect } from '@studiocms/ui/components';
+    ---
+
+    <SearchSelect
+      label='Searchable Select Element'
+      fullWidth
+      options={[
+        { label: "Option 1", value: "opt-1" },
+        { label: "Option 2", value: "opt-2" },
+        { label: "Option 3", value: "opt-3" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+:::note[About Accessibility]
+The searchable select's dropdown can be navigated with the arrow keys to focus an option and hitting 
+`Enter` to select the currently focused option.
+:::
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/components/select.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/components/select.mdx
new file mode 100644
index 0000000000..0f27625d98
--- /dev/null
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/components/select.mdx
@@ -0,0 +1,157 @@
+---
+title: Select
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import PreviewCard from '~/components/PreviewCard.astro';
+import { Select } from '@studiocms/ui/components';
+
+A custom select element that just works.
+
+## Usage
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Select
+        label='Select Element'
+        options={[
+          { label: "Option 1", value: "opt-1-1" },
+          { label: "Option 2", value: "opt-2-1" },
+          { label: "Option 3", value: "opt-3-1" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Select } from '@studiocms/ui/components';
+    ---
+
+    <Select
+      label='Select Element'
+      options={[
+        { label: "Option 1", value: "opt-1" },
+        { label: "Option 2", value: "opt-2" },
+        { label: "Option 3", value: "opt-3" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Default Value
+
+You can set a default value using the `defaultValue` prop:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Select
+        label='Select Element'
+        defaultValue='opt-1-1'
+        options={[
+          { label: "Option 1", value: "opt-1-1" },
+          { label: "Option 2", value: "opt-2-1" },
+          { label: "Option 3", value: "opt-3-1" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Select } from '@studiocms/ui/components';
+    ---
+
+    <Select
+      label='Select Element'
+      defaultValue='opt-1'
+      options={[
+        { label: "Option 1", value: "opt-1" },
+        { label: "Option 2", value: "opt-2" },
+        { label: "Option 3", value: "opt-3" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+### Form Support
+
+You can use the `isRequired` prop to mark the select input as required. This will also add a red `*` to
+the label.
+
+If you need to access the element's value later on, you can pass the `name` prop. It will then appear in any FormData
+you construct. If no name is set, a random one is generated for the component.
+
+Additionally, you can either disable the entire select input by using the `disabled` prop, or disable
+individual options by adding `disabled: true` to the option you want to disable:
+
+```astro ins={7-9}
+---
+import { Select } from '@studiocms/ui/components';
+---
+
+<Select
+  label='Select Element'
+  defaultValue='opt-1'
+  isRequired
+  disabled
+  name="select-element"
+  options={[
+    // ...
+    { 
+      label: "Option X", 
+      value: "opt-x", 
+      disabled: true // [!code ++]
+    },
+    // ...
+  ]}
+/>
+```
+
+
+### Full Width
+
+Normally, the input has a minimum width and extends as needed. You can force it to take up
+the entire width of its parent container by setting the `fullWidth` prop to true:
+
+<Tabs>
+  <TabItem label="Preview">
+    <PreviewCard>
+      <Select
+        label='Select Element'
+        fullWidth
+        options={[
+          { label: "Option 1", value: "f-opt-1-1" },
+          { label: "Option 2", value: "f-opt-1-2" },
+          { label: "Option 3", value: "f-opt-1-3" },
+        ]}
+      />
+    </PreviewCard>
+  </TabItem>
+  <TabItem label="Code">
+    ```astro
+    ---
+    import { Select } from '@studiocms/ui/components';
+    ---
+
+    <Select
+      label='Select Element'
+      fullWidth
+      options={[
+        { label: "Option 1", value: "opt-1" },
+        { label: "Option 2", value: "opt-2" },
+        { label: "Option 3", value: "opt-3" },
+      ]}
+    />
+    ```
+  </TabItem>
+</Tabs>
+
+:::note[About Accessibility]
+The select element's dropdown can be navigated via tabbing and elements can be selected by hitting the 
+`Enter` key.
+:::
diff --git a/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx b/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx
index 6e754a4e66..d578c46a2a 100644
--- a/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx
+++ b/www/docs/src/content/docs/customizing/studiocms-ui/index.mdx
@@ -28,11 +28,11 @@ import { Button } from '@studiocms/ui/components';
 <Button />
 ```
 
-Include the styles by importing `@studiocms/ui/styles/global.css` in your page layout.
+Include the styles by importing `@studiocms/ui/css/global.css` in your page layout.
 
 ```astro
 ---
-import '@studiocms/ui/styles/global.css';
+import '@studiocms/ui/css/global.css';
 ---
 ```