diff --git a/packages/ui/src/components/banner/banner.tsx b/packages/ui/src/components/banner/banner.tsx
index bf7909b1c..570dde959 100644
--- a/packages/ui/src/components/banner/banner.tsx
+++ b/packages/ui/src/components/banner/banner.tsx
@@ -1,7 +1,7 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './banner.module.css'
 
 export type BannerProps = {
@@ -11,15 +11,14 @@ export type BannerProps = {
 }
 export type BannerVariant = 'success' | 'warning'
 
-export function Banner({
-  children,
-  icon,
-  variant,
-  ...rest
-}: Props<HTMLDivElement, BannerProps>): JSX.Element {
+export const Banner = createComponent<HTMLDivElement, BannerProps>(function (
+  { children, icon, variant, ...rest },
+  ref
+): JSX.Element {
   return (
     <div
       {...rest}
+      ref={ref}
       class={createClassName([
         styles.banner,
         typeof variant === 'undefined' ? null : styles[variant]
@@ -29,4 +28,4 @@ export function Banner({
       <div class={styles.children}>{children}</div>
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/button/button.tsx b/packages/ui/src/components/button/button.tsx
index d5a8ad53e..fb8ecc85e 100644
--- a/packages/ui/src/components/button/button.tsx
+++ b/packages/ui/src/components/button/button.tsx
@@ -1,44 +1,55 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js'
 import styles from './button.module.css'
 
-export type ButtonProps = {
+export interface ButtonProps
+  extends FocusableComponentProps<HTMLButtonElement> {
   children: ComponentChildren
   danger?: boolean
   disabled?: boolean
   fullWidth?: boolean
   loading?: boolean
-  onClick?: JSX.MouseEventHandler<HTMLButtonElement>
-  propagateEscapeKeyDown?: boolean
+  onClick?: EventHandler.onClick<HTMLButtonElement>
   secondary?: boolean
 }
 
-export function Button({
-  children,
-  danger = false,
-  disabled = false,
-  fullWidth = false,
-  loading = false,
-  onClick,
-  propagateEscapeKeyDown = true,
-  secondary = false,
-  ...rest
-}: Props<HTMLButtonElement, ButtonProps>): JSX.Element {
+export const Button = createComponent<HTMLButtonElement, ButtonProps>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    children,
+    danger = false,
+    disabled = false,
+    fullWidth = false,
+    loading = false,
+    onClick = noop,
+    onKeyDown = noop,
+    propagateEscapeKeyDown = true,
+    secondary = false,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLButtonElement>): void {
+    function (event: Event.onKeyDown<HTMLButtonElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -59,15 +70,16 @@ export function Button({
       ) : null}
       <button
         {...rest}
+        ref={ref}
         disabled={disabled === true}
         onClick={disabled === true || loading === true ? undefined : onClick}
         onKeyDown={
           disabled === true || loading === true ? undefined : handleKeyDown
         }
-        tabIndex={disabled === true ? -1 : 0}
+        tabIndex={0}
       >
         <div class={styles.children}>{children}</div>
       </button>
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/button/stories/button-danger.stories.tsx b/packages/ui/src/components/button/stories/button-danger.stories.tsx
index 569c925ec..6f081a85c 100644
--- a/packages/ui/src/components/button/stories/button-danger.stories.tsx
+++ b/packages/ui/src/components/button/stories/button-danger.stories.tsx
@@ -105,3 +105,11 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return (
+    <Button blurOnEscapeKeyDown={false} danger>
+      Text
+    </Button>
+  )
+}
diff --git a/packages/ui/src/components/button/stories/button-default.stories.tsx b/packages/ui/src/components/button/stories/button-default.stories.tsx
index 6816a4074..66896cd33 100644
--- a/packages/ui/src/components/button/stories/button-default.stories.tsx
+++ b/packages/ui/src/components/button/stories/button-default.stories.tsx
@@ -101,3 +101,7 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return <Button blurOnEscapeKeyDown={false}>Text</Button>
+}
diff --git a/packages/ui/src/components/button/stories/button-secondary-danger.stories.tsx b/packages/ui/src/components/button/stories/button-secondary-danger.stories.tsx
index 31b9f19c3..c155a18cb 100644
--- a/packages/ui/src/components/button/stories/button-secondary-danger.stories.tsx
+++ b/packages/ui/src/components/button/stories/button-secondary-danger.stories.tsx
@@ -111,3 +111,11 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return (
+    <Button blurOnEscapeKeyDown={false} danger secondary>
+      Text
+    </Button>
+  )
+}
diff --git a/packages/ui/src/components/button/stories/button-secondary.stories.tsx b/packages/ui/src/components/button/stories/button-secondary.stories.tsx
index 56d267192..bae98de6d 100644
--- a/packages/ui/src/components/button/stories/button-secondary.stories.tsx
+++ b/packages/ui/src/components/button/stories/button-secondary.stories.tsx
@@ -105,3 +105,11 @@ export const FullWidthLongText = function () {
 FullWidthLongText.parameters = {
   fixedWidth: true
 }
+
+export const BlurOnEscapeKeyDown = function () {
+  return (
+    <Button blurOnEscapeKeyDown={false} secondary>
+      Text
+    </Button>
+  )
+}
diff --git a/packages/ui/src/components/checkbox/checkbox.tsx b/packages/ui/src/components/checkbox/checkbox.tsx
index 4349cee5c..75381e60a 100644
--- a/packages/ui/src/components/checkbox/checkbox.tsx
+++ b/packages/ui/src/components/checkbox/checkbox.tsx
@@ -2,79 +2,90 @@ import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconControlCheckboxChecked12 } from '../../icons/icon-12/icon-control-checkbox-checked-12.js'
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './checkbox.module.css'
 
-export type CheckboxProps<Name extends string> = {
+export interface CheckboxProps
+  extends FocusableComponentProps<HTMLInputElement> {
   children: ComponentChildren
   disabled?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<boolean, Name>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<boolean>
   value: boolean
 }
 
-export function Checkbox<Name extends string>({
-  children,
-  disabled = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  propagateEscapeKeyDown = true,
-  value = false,
-  ...rest
-}: Props<HTMLInputElement, CheckboxProps<Name>>): JSX.Element {
-  const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const newValue = event.currentTarget.checked
-      onValueChange(newValue, name)
-      onChange(event)
+export const Checkbox = createComponent<HTMLInputElement, CheckboxProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      children,
+      disabled = false,
+      onChange = noop,
+      onKeyDown = noop,
+      onValueChange = noop,
+      propagateEscapeKeyDown = true,
+      value,
+      ...rest
     },
-    [name, onChange, onValueChange]
-  )
+    ref
+  ): JSX.Element {
+    const handleChange = useCallback(
+      function (event: Event.onChange<HTMLInputElement>): void {
+        const newValue = event.currentTarget.checked
+        onValueChange(newValue)
+        onChange(event)
+      },
+      [onChange, onValueChange]
+    )
 
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      event.currentTarget.blur()
-    },
-    [propagateEscapeKeyDown]
-  )
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onKeyDown(event)
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
+    )
 
-  return (
-    <label
-      class={createClassName([
-        styles.checkbox,
-        disabled === true ? styles.disabled : null
-      ])}
-    >
-      <input
-        {...rest}
-        checked={value === true}
-        class={styles.input}
-        disabled={disabled === true}
-        name={name}
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        tabIndex={disabled === true ? -1 : 0}
-        type="checkbox"
-      />
-      <div class={styles.fill}>
-        {value === true ? (
-          <div class={styles.checkIcon}>
-            <IconControlCheckboxChecked12 />
-          </div>
-        ) : null}
-      </div>
-      <div class={styles.border} />
-      <div class={styles.children}>{children}</div>
-    </label>
-  )
-}
+    return (
+      <label
+        class={createClassName([
+          styles.checkbox,
+          disabled === true ? styles.disabled : null
+        ])}
+      >
+        <input
+          {...rest}
+          ref={ref}
+          checked={value === true}
+          class={styles.input}
+          disabled={disabled === true}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+          type="checkbox"
+        />
+        <div class={styles.fill}>
+          {value === true ? (
+            <div class={styles.checkIcon}>
+              <IconControlCheckboxChecked12 />
+            </div>
+          ) : null}
+        </div>
+        <div class={styles.border} />
+        <div class={styles.children}>{children}</div>
+      </label>
+    )
+  }
+)
diff --git a/packages/ui/src/components/disclosure/disclosure.tsx b/packages/ui/src/components/disclosure/disclosure.tsx
index 905c785de..eac7437f0 100644
--- a/packages/ui/src/components/disclosure/disclosure.tsx
+++ b/packages/ui/src/components/disclosure/disclosure.tsx
@@ -2,58 +2,72 @@ import { ComponentChildren, Fragment, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconCaretRight16 } from '../../icons/icon-16/icon-caret-right-16.js'
-import { Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './disclosure.module.css'
 
-export type DisclosureProps = {
+export interface DisclosureProps
+  extends FocusableComponentProps<HTMLInputElement> {
   children: ComponentChildren
-  onClick: JSX.MouseEventHandler<HTMLInputElement>
+  onClick?: EventHandler.onClick<HTMLInputElement>
   open: boolean
-  propagateEscapeKeyDown?: boolean
   title: string
 }
 
-export function Disclosure({
-  children,
-  onClick,
-  open,
-  propagateEscapeKeyDown = true,
-  title,
-  ...rest
-}: Props<HTMLInputElement, DisclosureProps>): JSX.Element {
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      event.currentTarget.blur()
+export const Disclosure = createComponent<HTMLInputElement, DisclosureProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      children,
+      onClick = noop,
+      onKeyDown = noop,
+      open,
+      propagateEscapeKeyDown = true,
+      title,
+      ...rest
     },
-    [propagateEscapeKeyDown]
-  )
+    ref
+  ): JSX.Element {
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onKeyDown(event)
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
+    )
 
-  return (
-    <Fragment>
-      <label class={styles.label}>
-        <input
-          {...rest}
-          checked={open === true}
-          class={styles.input}
-          onClick={onClick}
-          onKeyDown={handleKeyDown}
-          tabIndex={0}
-          type="checkbox"
-        />
-        <div class={styles.title}>
-          <div class={styles.icon}>
-            <IconCaretRight16 />
+    return (
+      <Fragment>
+        <label class={styles.label}>
+          <input
+            {...rest}
+            ref={ref}
+            checked={open === true}
+            class={styles.input}
+            onClick={onClick}
+            onKeyDown={handleKeyDown}
+            tabIndex={0}
+            type="checkbox"
+          />
+          <div class={styles.title}>
+            <div class={styles.icon}>
+              <IconCaretRight16 />
+            </div>
+            {title}
           </div>
-          {title}
-        </div>
-      </label>
-      {open === true ? <div class={styles.children}>{children}</div> : null}
-    </Fragment>
-  )
-}
+        </label>
+        {open === true ? <div class={styles.children}>{children}</div> : null}
+      </Fragment>
+    )
+  }
+)
diff --git a/packages/ui/src/components/divider/divider.tsx b/packages/ui/src/components/divider/divider.tsx
index 91e2735cb..c3f175a64 100644
--- a/packages/ui/src/components/divider/divider.tsx
+++ b/packages/ui/src/components/divider/divider.tsx
@@ -1,8 +1,10 @@
 import { h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './divider.module.css'
 
-export function Divider(props: Props<HTMLHRElement>): JSX.Element {
-  return <hr {...props} class={styles.divider} />
-}
+export const Divider = createComponent<HTMLHRElement, Record<string, never>>(
+  function (rest, ref): JSX.Element {
+    return <hr {...rest} ref={ref} class={styles.divider} />
+  }
+)
diff --git a/packages/ui/src/components/dropdown/dropdown.module.css b/packages/ui/src/components/dropdown/dropdown.module.css
index 8280c0d51..a3b3f91c5 100644
--- a/packages/ui/src/components/dropdown/dropdown.module.css
+++ b/packages/ui/src/components/dropdown/dropdown.module.css
@@ -77,9 +77,15 @@
   border-radius: var(--border-radius-2);
 }
 .hasBorder .border,
-.dropdown:not(.disabled):hover .border {
+.dropdown:not(.disabled):not(:focus):hover .border {
   border-color: var(--figma-color-border);
 }
+.dropdown:focus .border {
+  top: -1px;
+  bottom: -1px;
+  border-width: 2px;
+  border-color: var(--figma-color-border-brand-strong);
+}
 
 .underline {
   position: absolute;
diff --git a/packages/ui/src/components/dropdown/dropdown.tsx b/packages/ui/src/components/dropdown/dropdown.tsx
index badaa827d..1e7d20bd4 100644
--- a/packages/ui/src/components/dropdown/dropdown.tsx
+++ b/packages/ui/src/components/dropdown/dropdown.tsx
@@ -6,341 +6,432 @@ import { useMouseDownOutside } from '../../hooks/use-mouse-down-outside.js'
 import { useScrollableMenu } from '../../hooks/use-scrollable-menu.js'
 import { IconControlChevronDown8 } from '../../icons/icon-8/icon-control-chevron-down-8.js'
 import { IconMenuCheckmarkChecked16 } from '../../icons/icon-16/icon-menu-checkmark-checked-16.js'
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../utilities/get-current-from-ref.js'
+import { noop } from '../../utilities/no-op.js'
 import dropdownStyles from './dropdown.module.css'
 import { INVALID_ID, ITEM_ID_DATA_ATTRIBUTE_NAME } from './private/constants.js'
 import { Id } from './private/types.js'
 import { updateMenuElementLayout } from './private/update-menu-element-layout.js'
 
-export type DropdownProps<
-  Name extends string,
-  Value extends boolean | number | string = string
-> = {
+export interface DropdownProps extends FocusableComponentProps<HTMLDivElement> {
   disabled?: boolean
   icon?: ComponentChildren
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<Value, Name>
-  options: Array<DropdownOption<Value>>
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<string>
+  options: Array<DropdownOption>
   placeholder?: string
-  value: null | Value
+  value: null | string
   variant?: DropdownVariant
 }
-export type DropdownOption<Value extends boolean | number | string = string> =
+export type DropdownOption =
   | DropdownOptionHeader
-  | DropdownOptionValue<Value>
   | DropdownOptionSeparator
+  | DropdownOptionValue
 export type DropdownOptionHeader = {
   header: string
 }
-export type DropdownOptionValue<Value> = {
+export type DropdownOptionSeparator = '-'
+export type DropdownOptionValue = {
   disabled?: boolean
   text?: string
-  value: Value
-}
-export type DropdownOptionSeparator = {
-  separator: true
+  value: string
 }
 export type DropdownVariant = 'border' | 'underline'
 
-export function Dropdown<
-  Name extends string,
-  Value extends boolean | number | string = string
->({
-  disabled = false,
-  icon,
-  name,
-  options,
-  onChange = function () {},
-  onValueChange = function () {},
-  placeholder,
-  value,
-  variant,
-  ...rest
-}: Props<HTMLDivElement, DropdownProps<Name, Value>>): JSX.Element {
-  if (typeof icon === 'string' && icon.length !== 1) {
-    throw new Error(`String \`icon\` must be a single character: ${icon}`)
-  }
+export const Dropdown = createComponent<HTMLDivElement, DropdownProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      disabled = false,
+      icon,
+      onChange = noop,
+      onValueChange = noop,
+      options,
+      placeholder,
+      propagateEscapeKeyDown = true,
+      value,
+      variant,
+      ...rest
+    },
+    ref
+  ): JSX.Element {
+    if (typeof icon === 'string' && icon.length !== 1) {
+      throw new Error(`String \`icon\` must be a single character: "${icon}"`)
+    }
 
-  const rootElementRef: RefObject<HTMLDivElement> = useRef(null)
-  const menuElementRef: RefObject<HTMLDivElement> = useRef(null)
+    const rootElementRef: RefObject<HTMLDivElement> = useRef(null)
+    const menuElementRef: RefObject<HTMLDivElement> = useRef(null)
 
-  const [isMenuVisible, setIsMenuVisible] = useState(false)
+    const [isMenuVisible, setIsMenuVisible] = useState(false)
 
-  const index = findOptionIndexByValue(options, value)
-  if (value !== null && index === -1) {
-    throw new Error(`Invalid \`value\`: ${value}`)
-  }
-  const [selectedId, setSelectedId] = useState<Id>(
-    index === -1 ? INVALID_ID : `${index}`
-  )
-  const children =
-    typeof options[index] === 'undefined'
-      ? ''
-      : getDropdownOptionValue(options[index])
+    const index = findOptionIndexByValue(options, value)
+    if (value !== null && index === -1) {
+      throw new Error(`Invalid \`value\`: ${value}`)
+    }
+    const [selectedId, setSelectedId] = useState<Id>(
+      index === -1 ? INVALID_ID : `${index}`
+    )
+    const children =
+      typeof options[index] === 'undefined'
+        ? ''
+        : getDropdownOptionValue(options[index])
 
-  // Uncomment to debug
-  // console.table([{ isMenuVisible, selectedId }])
+    // Uncomment to debug
+    // console.table([{ isMenuVisible, selectedId }])
 
-  const { handleScrollableMenuKeyDown, handleScrollableMenuItemMouseMove } =
-    useScrollableMenu({
-      itemIdDataAttributeName: ITEM_ID_DATA_ATTRIBUTE_NAME,
-      menuElementRef,
-      selectedId: selectedId,
-      setSelectedId: setSelectedId
-    })
+    const { handleScrollableMenuKeyDown, handleScrollableMenuItemMouseMove } =
+      useScrollableMenu({
+        itemIdDataAttributeName: ITEM_ID_DATA_ATTRIBUTE_NAME,
+        menuElementRef,
+        selectedId: selectedId,
+        setSelectedId: setSelectedId
+      })
 
-  const triggerBlur = useCallback(function (): void {
-    setIsMenuVisible(false)
-    setSelectedId(INVALID_ID)
-    getCurrentFromRef(rootElementRef).blur()
-  }, [])
+    const triggerBlur = useCallback(function (): void {
+      getCurrentFromRef(rootElementRef).blur()
+    }, [])
 
-  const triggerUpdateMenuElementLayout = useCallback(function (selectedId: Id) {
-    const rootElement = getCurrentFromRef(rootElementRef)
-    const menuElement = getCurrentFromRef(menuElementRef)
-    updateMenuElementLayout(rootElement, menuElement, selectedId)
-  }, [])
+    const triggerHideMenu = useCallback(function (): void {
+      setIsMenuVisible(false)
+      setSelectedId(INVALID_ID)
+    }, [])
 
-  const handleRootFocus = useCallback(
-    function (): void {
-      if (isMenuVisible === true) {
-        return
-      }
-      // Show the menu and update the `selectedId` on focus
-      setIsMenuVisible(true)
-      if (value === null) {
-        triggerUpdateMenuElementLayout(selectedId)
-        return
-      }
-      const index = findOptionIndexByValue(options, value)
-      if (index === -1) {
-        throw new Error(`Invalid \`value\`: ${value}`)
-      }
-      const newSelectedId = `${index}`
-      setSelectedId(newSelectedId)
-      triggerUpdateMenuElementLayout(newSelectedId)
+    const triggerUpdateMenuElementLayout = useCallback(function (
+      selectedId: Id
+    ) {
+      const rootElement = getCurrentFromRef(rootElementRef)
+      const menuElement = getCurrentFromRef(menuElementRef)
+      updateMenuElementLayout(rootElement, menuElement, selectedId)
     },
-    [isMenuVisible, options, selectedId, triggerUpdateMenuElementLayout, value]
-  )
+    [])
 
-  const handleRootKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLDivElement>): void {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        triggerBlur()
-        return
-      }
-      if (event.key === 'Enter') {
-        if (selectedId !== INVALID_ID) {
-          const selectedElement = getCurrentFromRef(
-            menuElementRef
-          ).querySelector<HTMLInputElement>(
-            `[${ITEM_ID_DATA_ATTRIBUTE_NAME}='${selectedId}']`
-          )
-          if (selectedElement === null) {
-            throw new Error('Invariant violation') // `selectedId` is valid
+    const triggerShowMenu = useCallback(
+      function () {
+        if (isMenuVisible === true) {
+          return
+        }
+        // Show the menu and update the `selectedId` on focus
+        setIsMenuVisible(true)
+        if (value === null) {
+          triggerUpdateMenuElementLayout(selectedId)
+          return
+        }
+        const index = findOptionIndexByValue(options, value)
+        if (index === -1) {
+          throw new Error(`Invalid \`value\`: ${value}`)
+        }
+        const newSelectedId = `${index}`
+        setSelectedId(newSelectedId)
+        triggerUpdateMenuElementLayout(newSelectedId)
+      },
+      [
+        isMenuVisible,
+        options,
+        selectedId,
+        triggerUpdateMenuElementLayout,
+        value
+      ]
+    )
+
+    const handleRootFocus = useCallback(
+      function (): void {
+        if (isMenuVisible === true) {
+          return
+        }
+        // Show the menu and update the `selectedId` on focus
+        setIsMenuVisible(true)
+        if (value === null) {
+          triggerUpdateMenuElementLayout(selectedId)
+          return
+        }
+        const index = findOptionIndexByValue(options, value)
+        if (index === -1) {
+          throw new Error(`Invalid \`value\`: ${value}`)
+        }
+        const newSelectedId = `${index}`
+        setSelectedId(newSelectedId)
+        triggerUpdateMenuElementLayout(newSelectedId)
+      },
+      [
+        isMenuVisible,
+        options,
+        selectedId,
+        triggerUpdateMenuElementLayout,
+        value
+      ]
+    )
+
+    const handleRootKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLDivElement>): void {
+        const key = event.key
+        if (key === 'ArrowUp' || key === 'ArrowDown') {
+          if (isMenuVisible === false) {
+            triggerShowMenu()
+            return
           }
-          selectedElement.checked = true
-          const changeEvent = document.createEvent('Event')
-          changeEvent.initEvent('change', true, true)
-          selectedElement.dispatchEvent(changeEvent)
+          handleScrollableMenuKeyDown(event)
+          return
         }
-        triggerBlur()
-        return
-      }
-      handleScrollableMenuKeyDown(event)
-    },
-    [handleScrollableMenuKeyDown, selectedId, triggerBlur]
-  )
+        if (key === 'Escape') {
+          triggerHideMenu()
+          return
+        }
+        if (key === 'Enter') {
+          if (isMenuVisible === false) {
+            triggerShowMenu()
+            return
+          }
+          if (selectedId !== INVALID_ID) {
+            const selectedElement = getCurrentFromRef(
+              menuElementRef
+            ).querySelector<HTMLInputElement>(
+              `[${ITEM_ID_DATA_ATTRIBUTE_NAME}='${selectedId}']`
+            )
+            if (selectedElement === null) {
+              throw new Error('Invariant violation') // `selectedId` is valid
+            }
+            selectedElement.checked = true
+            const changeEvent = new window.Event('change', {
+              bubbles: true,
+              cancelable: true
+            })
+            selectedElement.dispatchEvent(changeEvent)
+          }
+          triggerHideMenu()
+          return
+        }
+        if (key === 'Tab') {
+          triggerHideMenu()
+          triggerBlur()
+          return
+        }
+      },
+      [
+        handleScrollableMenuKeyDown,
+        isMenuVisible,
+        selectedId,
+        triggerBlur,
+        triggerHideMenu,
+        triggerShowMenu
+      ]
+    )
 
-  const handleRootMouseDown = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLDivElement>): void {
-      // `mousedown` events from `menuElement` are stopped from propagating to `rootElement` by `handleMenuMouseDown`
-      if (isMenuVisible === false) {
-        return
-      }
-      event.preventDefault()
-      triggerBlur()
+    const handleRootMouseDown = useCallback(
+      function (): void {
+        // `mousedown` events from `menuElement` are stopped from propagating to `rootElement` by `handleMenuMouseDown`
+        if (isMenuVisible === false) {
+          triggerShowMenu()
+        }
+      },
+      [isMenuVisible, triggerShowMenu]
+    )
+
+    const handleMenuMouseDown = useCallback(function (
+      event: Event.onMouseDown<HTMLDivElement>
+    ): void {
+      // Stop the `mousedown` event from propagating to the `rootElement`
+      event.stopPropagation()
     },
-    [isMenuVisible, triggerBlur]
-  )
+    [])
 
-  const handleMenuMouseDown = useCallback(function (
-    event: JSX.TargetedMouseEvent<HTMLDivElement>
-  ): void {
-    // Stop the `mousedown` event from propagating to the `rootElement`
-    event.stopPropagation()
-  },
-  [])
+    const handleOptionChange = useCallback(
+      function (event: Event.onChange<HTMLInputElement>): void {
+        const id = event.currentTarget.getAttribute(
+          ITEM_ID_DATA_ATTRIBUTE_NAME
+        ) as string
+        const optionValue = options[parseInt(id, 10)] as DropdownOptionValue
+        const newValue = optionValue.value
+        onValueChange(newValue)
+        onChange(event)
+        getCurrentFromRef(rootElementRef).focus()
+        triggerHideMenu()
+      },
+      [onChange, onValueChange, options, triggerHideMenu]
+    )
 
-  const handleOptionChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const id = event.currentTarget.getAttribute(
-        ITEM_ID_DATA_ATTRIBUTE_NAME
-      ) as string
-      const optionValue = options[
-        parseInt(id, 10)
-      ] as DropdownOptionValue<Value>
-      const newValue = optionValue.value
-      onValueChange(newValue, name)
-      onChange(event)
-      triggerBlur()
-    },
-    [name, onChange, onValueChange, options, triggerBlur]
-  )
+    const handleOptionClick = useCallback(
+      function (): void {
+        triggerHideMenu()
+        getCurrentFromRef(rootElementRef).focus()
+      },
+      [triggerHideMenu]
+    )
 
-  const handleMouseDownOutside = useCallback(
-    function (): void {
-      if (isMenuVisible === false) {
-        return
-      }
-      triggerBlur()
-    },
-    [isMenuVisible, triggerBlur]
-  )
-  useMouseDownOutside({
-    onMouseDownOutside: handleMouseDownOutside,
-    ref: rootElementRef
-  })
+    const handleMouseDownOutside = useCallback(
+      function (): void {
+        if (isMenuVisible === false) {
+          return
+        }
+        triggerHideMenu()
+        triggerBlur()
+      },
+      [isMenuVisible, triggerBlur, triggerHideMenu]
+    )
+    useMouseDownOutside({
+      onMouseDownOutside: handleMouseDownOutside,
+      ref: rootElementRef
+    })
 
-  return (
-    <div
-      {...rest}
-      ref={rootElementRef}
-      class={createClassName([
-        dropdownStyles.dropdown,
-        typeof variant === 'undefined'
-          ? null
-          : variant === 'border'
-          ? dropdownStyles.hasBorder
-          : null,
-        typeof icon === 'undefined' ? null : dropdownStyles.hasIcon,
-        disabled === true ? dropdownStyles.disabled : null
-      ])}
-      onFocus={handleRootFocus}
-      onKeyDown={disabled === true ? undefined : handleRootKeyDown}
-      onMouseDown={handleRootMouseDown}
-      tabIndex={disabled === true ? -1 : 0}
-    >
-      {typeof icon === 'undefined' ? null : (
-        <div class={dropdownStyles.icon}>{icon}</div>
-      )}
-      {value === null ? (
-        typeof placeholder === 'undefined' ? (
-          <div class={dropdownStyles.empty} />
-        ) : (
-          <div
-            class={createClassName([
-              dropdownStyles.value,
-              dropdownStyles.placeholder
-            ])}
-          >
-            {placeholder}
-          </div>
-        )
-      ) : (
-        <div class={dropdownStyles.value}>{children}</div>
-      )}
-      <div class={dropdownStyles.chevronIcon}>
-        <IconControlChevronDown8 />
-      </div>
-      {variant === 'underline' ? (
-        <div class={dropdownStyles.underline} />
-      ) : null}
-      <div class={dropdownStyles.border} />
+    const refCallback = useCallback(
+      function (divElement: null | HTMLDivElement) {
+        rootElementRef.current = divElement
+        if (ref === null) {
+          return
+        }
+        if (typeof ref === 'function') {
+          ref(divElement)
+          return
+        }
+        ref.current = divElement
+      },
+      [ref, rootElementRef]
+    )
+
+    return (
       <div
-        ref={menuElementRef}
+        {...rest}
+        ref={refCallback}
         class={createClassName([
-          menuStyles.menu,
-          dropdownStyles.menu,
-          disabled === true || isMenuVisible === false
-            ? menuStyles.hidden
-            : null
+          dropdownStyles.dropdown,
+          variant === 'border' ? dropdownStyles.hasBorder : null,
+          typeof icon !== 'undefined' ? dropdownStyles.hasIcon : null,
+          disabled === true ? dropdownStyles.disabled : null
         ])}
-        onMouseDown={handleMenuMouseDown}
+        // onFocus={handleRootFocus}
+        onKeyDown={disabled === true ? undefined : handleRootKeyDown}
+        onMouseDown={handleRootMouseDown}
+        tabIndex={0}
       >
-        {options.map(function (
-          option: DropdownOption<Value>,
-          index: number
-        ): JSX.Element {
-          if ('separator' in option) {
-            return <hr key={index} class={menuStyles.optionSeparator} />
-          }
-          if ('header' in option) {
-            return (
-              <h1 key={index} class={menuStyles.optionHeader}>
-                {option.header}
-              </h1>
-            )
-          }
-          return (
-            <label
-              key={index}
+        {typeof icon === 'undefined' ? null : (
+          <div class={dropdownStyles.icon}>{icon}</div>
+        )}
+        {value === null ? (
+          typeof placeholder === 'undefined' ? (
+            <div class={dropdownStyles.empty} />
+          ) : (
+            <div
               class={createClassName([
-                menuStyles.optionValue,
-                option.disabled === true
-                  ? menuStyles.optionValueDisabled
-                  : null,
-                option.disabled !== true && `${index}` === selectedId
-                  ? menuStyles.optionValueSelected
-                  : null
+                dropdownStyles.value,
+                dropdownStyles.placeholder
               ])}
             >
-              <input
-                checked={value === option.value}
-                class={menuStyles.input}
-                disabled={option.disabled === true}
-                name={name}
-                // If clicked on an unselected element, set the value
-                onChange={
-                  value === option.value ? undefined : handleOptionChange
-                }
-                // Else blur if clicked on an already-selected element
-                onClick={value === option.value ? triggerBlur : undefined}
-                onMouseMove={handleScrollableMenuItemMouseMove}
-                tabIndex={-1}
-                type="radio"
-                value={`${option.value}`}
-                {...{ [ITEM_ID_DATA_ATTRIBUTE_NAME]: `${index}` }}
-              />
-              {option.value === value ? (
-                <div class={menuStyles.checkIcon}>
-                  <IconMenuCheckmarkChecked16 />
-                </div>
-              ) : null}
-              {typeof option.text === 'undefined' ? option.value : option.text}
-            </label>
+              {placeholder}
+            </div>
           )
-        })}
+        ) : (
+          <div class={dropdownStyles.value}>{children}</div>
+        )}
+        <div class={dropdownStyles.chevronIcon}>
+          <IconControlChevronDown8 />
+        </div>
+        {variant === 'underline' ? (
+          <div class={dropdownStyles.underline} />
+        ) : null}
+        <div class={dropdownStyles.border} />
+        <div
+          ref={menuElementRef}
+          class={createClassName([
+            menuStyles.menu,
+            dropdownStyles.menu,
+            disabled === true || isMenuVisible === false
+              ? menuStyles.hidden
+              : null
+          ])}
+          onMouseDown={handleMenuMouseDown}
+        >
+          {options.map(function (
+            option: DropdownOption,
+            index: number
+          ): JSX.Element {
+            if (typeof option === 'string') {
+              return <hr key={index} class={menuStyles.optionSeparator} />
+            }
+            if ('header' in option) {
+              return (
+                <h1 key={index} class={menuStyles.optionHeader}>
+                  {option.header}
+                </h1>
+              )
+            }
+            return (
+              <label
+                key={index}
+                class={createClassName([
+                  menuStyles.optionValue,
+                  option.disabled === true
+                    ? menuStyles.optionValueDisabled
+                    : null,
+                  option.disabled !== true && `${index}` === selectedId
+                    ? menuStyles.optionValueSelected
+                    : null
+                ])}
+              >
+                <input
+                  checked={value === option.value}
+                  class={menuStyles.input}
+                  disabled={option.disabled === true}
+                  // If clicked on an unselected element, set the value
+                  onChange={
+                    value === option.value ? undefined : handleOptionChange
+                  }
+                  // Else hide the menu if clicked on an already-selected element
+                  onClick={
+                    value === option.value ? handleOptionClick : undefined
+                  }
+                  onMouseMove={handleScrollableMenuItemMouseMove}
+                  tabIndex={-1}
+                  type="radio"
+                  value={`${option.value}`}
+                  {...{ [ITEM_ID_DATA_ATTRIBUTE_NAME]: `${index}` }}
+                />
+                {option.value === value ? (
+                  <div class={menuStyles.checkIcon}>
+                    <IconMenuCheckmarkChecked16 />
+                  </div>
+                ) : null}
+                {typeof option.text === 'undefined'
+                  ? option.value
+                  : option.text}
+              </label>
+            )
+          })}
+        </div>
       </div>
-    </div>
-  )
-}
-
-function getDropdownOptionValue<
-  Value extends boolean | number | string = string
->(option: DropdownOption<Value>): ComponentChildren {
-  if ('text' in option) {
-    return option.text
+    )
   }
-  if ('value' in option) {
-    return option.value
+)
+
+function getDropdownOptionValue(option: DropdownOption): ComponentChildren {
+  if (typeof option !== 'string') {
+    if ('text' in option) {
+      return option.text
+    }
+    if ('value' in option) {
+      return option.value
+    }
   }
   throw new Error('Invariant violation')
 }
 
 // Returns the index of the option in `options` with the given `value`, else `-1`
-function findOptionIndexByValue<
-  Value extends boolean | number | string = string
->(options: Array<DropdownOption<Value>>, value: null | Value): number {
+function findOptionIndexByValue(
+  options: Array<DropdownOption>,
+  value: null | string
+): number {
   if (value === null) {
     return -1
   }
   let index = 0
   for (const option of options) {
-    if ('value' in option && option.value === value) {
+    if (
+      typeof option !== 'string' &&
+      'value' in option &&
+      option.value === value
+    ) {
       return index
     }
     index += 1
diff --git a/packages/ui/src/components/dropdown/stories/dropdown-border.stories.tsx b/packages/ui/src/components/dropdown/stories/dropdown-border.stories.tsx
index d7ffd7c30..08d46684f 100644
--- a/packages/ui/src/components/dropdown/stories/dropdown-border.stories.tsx
+++ b/packages/ui/src/components/dropdown/stories/dropdown-border.stories.tsx
@@ -22,7 +22,7 @@ export const Empty = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -32,12 +32,16 @@ export const Empty = function () {
     setValue(newValue)
   }
   return (
-    <Dropdown
-      onChange={handleChange}
-      options={options}
-      value={value}
-      variant="border"
-    />
+    <div>
+      <input style="background:red" type="text" />
+      <Dropdown
+        onChange={handleChange}
+        options={options}
+        value={value}
+        variant="border"
+      />
+      <input style="background:red" type="text" />
+    </div>
   )
 }
 
@@ -69,7 +73,7 @@ export const Placeholder = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -82,7 +86,7 @@ export const Placeholder = function () {
     <Dropdown
       onChange={handleChange}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -95,7 +99,7 @@ export const Filled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -142,7 +146,7 @@ export const LongText = function () {
     { value: Array(20).fill('foo').join(' ') },
     { value: Array(20).fill('bar').join(' ') },
     { value: Array(20).fill('baz').join(' ') },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: Array(4).fill('qux').join(' ') }
   ]
@@ -167,7 +171,7 @@ export const Focused = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -192,7 +196,7 @@ export const Disabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -216,7 +220,7 @@ export const OptionDisabled = function () {
     { value: 'foo' },
     { disabled: true, value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -244,7 +248,7 @@ export const OptionText = function () {
     },
     { text: 'bar', value: 'b' },
     { text: 'baz', value: 'c' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { text: 'qux', value: 'd' }
   ]
@@ -269,7 +273,7 @@ export const Icon = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -295,7 +299,7 @@ export const IconDisabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -322,7 +326,7 @@ export const IconText = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -348,7 +352,7 @@ export const IconTextDisabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -379,7 +383,7 @@ export const DynamicallySetOptions = function () {
       { value: 'foo' },
       { value: 'bar' },
       { value: 'baz' },
-      { separator: true },
+      '-',
       { header: 'Header' },
       { value: 'qux' }
     ])
@@ -396,7 +400,7 @@ export const DynamicallySetOptions = function () {
       <Dropdown
         onChange={handleChange}
         options={options}
-        placeholder="placeholder"
+        placeholder="Placeholder"
         value={value}
         variant="border"
       />
@@ -452,7 +456,7 @@ export const OnValueChange = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -476,7 +480,7 @@ export const TopLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -539,7 +543,7 @@ export const TopRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -602,7 +606,7 @@ export const MiddleLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -667,7 +671,7 @@ export const MiddleRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -732,7 +736,7 @@ export const BottomLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -795,7 +799,7 @@ export const BottomRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
diff --git a/packages/ui/src/components/dropdown/stories/dropdown-default.stories.tsx b/packages/ui/src/components/dropdown/stories/dropdown-default.stories.tsx
index 46e15ee9f..1ff865c12 100644
--- a/packages/ui/src/components/dropdown/stories/dropdown-default.stories.tsx
+++ b/packages/ui/src/components/dropdown/stories/dropdown-default.stories.tsx
@@ -22,7 +22,7 @@ export const Empty = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -55,7 +55,7 @@ export const Placeholder = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -68,7 +68,7 @@ export const Placeholder = function () {
     <Dropdown
       onChange={handleChange}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
@@ -80,7 +80,7 @@ export const Filled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -113,7 +113,7 @@ export const LongText = function () {
     { value: Array(20).fill('foo').join(' ') },
     { value: Array(20).fill('bar').join(' ') },
     { value: Array(20).fill('baz').join(' ') },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: Array(4).fill('qux').join(' ') }
   ]
@@ -131,7 +131,7 @@ export const Focused = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -155,7 +155,7 @@ export const Disabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -173,7 +173,7 @@ export const OptionDisabled = function () {
     { value: 'foo' },
     { disabled: true, value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -194,7 +194,7 @@ export const OptionText = function () {
     },
     { text: 'bar', value: 'b' },
     { text: 'baz', value: 'c' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { text: 'qux', value: 'd' }
   ]
@@ -212,7 +212,7 @@ export const Icon = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -237,7 +237,7 @@ export const IconDisabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -263,7 +263,7 @@ export const IconText = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -288,7 +288,7 @@ export const IconTextDisabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -318,7 +318,7 @@ export const DynamicallySetOptions = function () {
       { value: 'foo' },
       { value: 'bar' },
       { value: 'baz' },
-      { separator: true },
+      '-',
       { header: 'Header' },
       { value: 'qux' }
     ])
@@ -335,7 +335,7 @@ export const DynamicallySetOptions = function () {
       <Dropdown
         onChange={handleChange}
         options={options}
-        placeholder="placeholder"
+        placeholder="Placeholder"
         value={value}
       />
     </Fragment>
@@ -379,7 +379,7 @@ export const OnValueChange = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -402,7 +402,7 @@ export const TopLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -455,7 +455,7 @@ export const TopRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -508,7 +508,7 @@ export const MiddleLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -563,7 +563,7 @@ export const MiddleRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -618,7 +618,7 @@ export const BottomLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -671,7 +671,7 @@ export const BottomRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
diff --git a/packages/ui/src/components/dropdown/stories/dropdown-underline.stories.tsx b/packages/ui/src/components/dropdown/stories/dropdown-underline.stories.tsx
index a2b83a051..e22ec8c30 100644
--- a/packages/ui/src/components/dropdown/stories/dropdown-underline.stories.tsx
+++ b/packages/ui/src/components/dropdown/stories/dropdown-underline.stories.tsx
@@ -22,7 +22,7 @@ export const Empty = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -69,7 +69,7 @@ export const Placeholder = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -82,7 +82,7 @@ export const Placeholder = function () {
     <Dropdown
       onChange={handleChange}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -95,7 +95,7 @@ export const Filled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -142,7 +142,7 @@ export const LongText = function () {
     { value: Array(20).fill('foo').join(' ') },
     { value: Array(20).fill('bar').join(' ') },
     { value: Array(20).fill('baz').join(' ') },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: Array(4).fill('qux').join(' ') }
   ]
@@ -167,7 +167,7 @@ export const Focused = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -192,7 +192,7 @@ export const Disabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -216,7 +216,7 @@ export const OptionDisabled = function () {
     { value: 'foo' },
     { disabled: true, value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -244,7 +244,7 @@ export const OptionText = function () {
     },
     { text: 'bar', value: 'b' },
     { text: 'baz', value: 'c' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { text: 'qux', value: 'd' }
   ]
@@ -269,7 +269,7 @@ export const Icon = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -295,7 +295,7 @@ export const IconDisabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -322,7 +322,7 @@ export const IconText = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -348,7 +348,7 @@ export const IconTextDisabled = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -379,7 +379,7 @@ export const DynamicallySetOptions = function () {
       { value: 'foo' },
       { value: 'bar' },
       { value: 'baz' },
-      { separator: true },
+      '-',
       { header: 'Header' },
       { value: 'qux' }
     ])
@@ -396,7 +396,7 @@ export const DynamicallySetOptions = function () {
       <Dropdown
         onChange={handleChange}
         options={options}
-        placeholder="placeholder"
+        placeholder="Placeholder"
         value={value}
         variant="underline"
       />
@@ -452,7 +452,7 @@ export const OnValueChange = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -476,7 +476,7 @@ export const TopLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -539,7 +539,7 @@ export const TopRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -602,7 +602,7 @@ export const MiddleLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -667,7 +667,7 @@ export const MiddleRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -732,7 +732,7 @@ export const BottomLeft = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
@@ -795,7 +795,7 @@ export const BottomRight = function () {
     { value: 'foo' },
     { value: 'bar' },
     { value: 'baz' },
-    { separator: true },
+    '-',
     { header: 'Header' },
     { value: 'qux' }
   ]
diff --git a/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx b/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx
index 850ce6930..f888adc54 100644
--- a/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx
+++ b/packages/ui/src/components/file-upload/file-upload-button/file-upload-button.tsx
@@ -1,40 +1,56 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { Props } from '../../../types/types.js'
+import { Event, EventHandler } from '../../../types/event-handler.js'
+import { FocusableComponentProps } from '../../../types/focusable-component-props.js'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
+import { noop } from '../../../utilities/no-op.js'
 import buttonStyles from '../../button/button.module.css'
 import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js'
 import { fileComparator } from '../private/file-comparator.js'
 import fileUploadButtonStyles from './file-upload-button.module.css'
 
-export type FileUploadButtonProps = {
+export interface FileUploadButtonProps
+  extends FocusableComponentProps<HTMLInputElement> {
   acceptedFileTypes?: Array<string>
   children: ComponentChildren
   disabled?: boolean
   fullWidth?: boolean
   loading?: boolean
   multiple?: boolean
-  onSelectedFiles?: (files: Array<File>) => void
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onClick?: EventHandler.onClick<HTMLInputElement>
+  onSelectedFiles?: EventHandler.onSelectedFiles
   secondary?: boolean
 }
 
-export function FileUploadButton({
-  acceptedFileTypes,
-  children,
-  disabled = false,
-  fullWidth = false,
-  loading = false,
-  multiple = false,
-  onSelectedFiles,
-  propagateEscapeKeyDown = true,
-  secondary = false,
-  ...rest
-}: Props<HTMLInputElement, FileUploadButtonProps>): JSX.Element {
+export const FileUploadButton = createComponent<
+  HTMLInputElement,
+  FileUploadButtonProps
+>(function (
+  {
+    acceptedFileTypes = [],
+    blurOnEscapeKeyDown = true,
+    children,
+    disabled = false,
+    fullWidth = false,
+    loading = false,
+    multiple = false,
+    onChange = noop,
+    onClick = noop,
+    onSelectedFiles = noop,
+    onKeyDown = noop,
+    propagateEscapeKeyDown = true,
+    secondary = false,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      if (typeof onSelectedFiles === 'undefined') {
+    function (event: Event.onChange<HTMLInputElement>): void {
+      onChange(event)
+      if (disabled === true || loading === true) {
         return
       }
       const files = Array.prototype.slice
@@ -42,43 +58,36 @@ export function FileUploadButton({
         .sort(fileComparator)
       onSelectedFiles(files)
     },
-    [onSelectedFiles]
+    [disabled, loading, onChange, onSelectedFiles]
   )
 
   const handleClick = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
+    function (event: Event.onClick<HTMLInputElement>): void {
+      onClick(event)
       if (disabled === true || loading === true) {
-        event.preventDefault()
         return
       }
       event.currentTarget.focus()
     },
-    [disabled, loading]
+    [disabled, loading, onClick]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
-  const handleLoadingMouseDown = useCallback(function (
-    event: JSX.TargetedMouseEvent<HTMLInputElement>
-  ): void {
-    // This is needed so that the `loading` state behaviour will be identical
-    // to the `Button` component ie. clicking the button will focus it.
-    event.preventDefault()
-    event.currentTarget.focus()
-  },
-  [])
-
   return (
     <div
       class={createClassName([
@@ -100,23 +109,19 @@ export function FileUploadButton({
       ) : null}
       <input
         {...rest}
+        ref={ref}
         accept={
-          typeof acceptedFileTypes === 'undefined'
+          acceptedFileTypes.length === 0
             ? undefined
             : acceptedFileTypes.join(',')
         }
         class={fileUploadButtonStyles.input}
         disabled={disabled === true}
         multiple={multiple}
-        onChange={
-          disabled === true || loading === true ? undefined : handleChange
-        }
+        onChange={handleChange}
         onClick={handleClick}
-        onKeyDown={
-          disabled === true || loading === true ? undefined : handleKeyDown
-        }
-        onMouseDown={loading === true ? handleLoadingMouseDown : undefined}
-        tabIndex={disabled === true ? -1 : 0}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
         title=""
         type="file"
       />
@@ -125,4 +130,4 @@ export function FileUploadButton({
       </button>
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx b/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx
index 67dee5774..a629f424b 100644
--- a/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx
+++ b/packages/ui/src/components/file-upload/file-upload-dropzone/file-upload-dropzone.tsx
@@ -1,107 +1,126 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback, useState } from 'preact/hooks'
 
-import { Props } from '../../../types/types.js'
+import { Event, EventHandler } from '../../../types/event-handler.js'
+import { FocusableComponentProps } from '../../../types/focusable-component-props.js'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
+import { noop } from '../../../utilities/no-op.js'
 import { fileComparator } from '../private/file-comparator.js'
 import styles from './file-upload-dropzone.module.css'
 
-export type FileUploadDropzoneProps = {
+export interface FileUploadDropzoneProps
+  extends FocusableComponentProps<HTMLInputElement> {
   acceptedFileTypes?: Array<string>
   children: ComponentChildren
   multiple?: boolean
-  onSelectedFiles?: (files: Array<File>) => void
-  propagateEscapeKeyDown?: boolean
+  onBlur?: EventHandler.onBlur<HTMLInputElement>
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onDragEnd?: EventHandler.onDragEnd<HTMLInputElement>
+  onDragEnter?: EventHandler.onDragEnter<HTMLInputElement>
+  onDragOver?: EventHandler.onDragOver<HTMLInputElement>
+  onDrop?: EventHandler.onDrop<HTMLInputElement>
+  onSelectedFiles?: EventHandler.onSelectedFiles
 }
 
-export function FileUploadDropzone({
-  acceptedFileTypes,
-  children,
-  multiple = false,
-  onSelectedFiles,
-  propagateEscapeKeyDown = true,
-  ...rest
-}: Props<HTMLInputElement, FileUploadDropzoneProps>): JSX.Element {
-  const [isDropActive, setIsDropActive] = useState(false)
+export const FileUploadDropzone = createComponent<
+  HTMLInputElement,
+  FileUploadDropzoneProps
+>(function (
+  {
+    acceptedFileTypes = [],
+    blurOnEscapeKeyDown = true,
+    children,
+    multiple = false,
+    onBlur = noop,
+    onChange = noop,
+    onDragEnd = noop,
+    onDragEnter = noop,
+    onDragOver = noop,
+    onDrop = noop,
+    onKeyDown = noop,
+    onSelectedFiles = noop,
+    propagateEscapeKeyDown = true,
+    ...rest
+  },
+  ref
+): JSX.Element {
+  const [isDropActive, setIsDropActive] = useState<boolean>(false)
 
-  const filterFiles = useCallback(
-    function (files: FileList): Array<File> {
-      const result = Array.prototype.slice.call(files).sort(fileComparator)
-      if (typeof acceptedFileTypes === 'undefined') {
-        return result
-      }
-      return result.filter(function (file): boolean {
-        return acceptedFileTypes.indexOf(file.type) !== -1
-      })
+  const handleBlur = useCallback(
+    function (event: Event.onBlur<HTMLInputElement>): void {
+      onBlur(event)
+      setIsDropActive(false)
     },
-    [acceptedFileTypes]
+    [onBlur]
   )
 
-  const handleBlur = useCallback(function (): void {
-    setIsDropActive(false)
-  }, [])
-
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      if (typeof onSelectedFiles === 'undefined') {
-        return
+    function (event: Event.onChange<HTMLInputElement>): void {
+      onChange(event)
+      const files = event.currentTarget.files
+      if (files === null) {
+        throw new Error('`event.currentTarget.files` is `null`')
       }
-      const files = event.currentTarget.files as FileList
-      onSelectedFiles(filterFiles(files))
+      onSelectedFiles(filterFiles({ acceptedFileTypes, files }))
     },
-    [filterFiles, onSelectedFiles]
+    [acceptedFileTypes, onChange, onSelectedFiles]
   )
 
-  const handleDragEnter = useCallback(function (
-    event: JSX.TargetedDragEvent<HTMLInputElement>
-  ) {
-    event.preventDefault()
-  },
-  [])
+  const handleDragEnter = useCallback(
+    function (event: Event.onDragEnter<HTMLInputElement>) {
+      onDragEnter(event)
+      event.preventDefault()
+    },
+    [onDragEnter]
+  )
 
-  const handleDragOver = useCallback(function (
-    event: JSX.TargetedDragEvent<HTMLInputElement>
-  ): void {
-    event.preventDefault()
-    setIsDropActive(true)
-  },
-  [])
+  const handleDragOver = useCallback(
+    function (event: Event.onDragOver<HTMLInputElement>): void {
+      onDragOver(event)
+      event.preventDefault()
+      setIsDropActive(true)
+    },
+    [onDragOver]
+  )
 
-  const handleDragEnd = useCallback(function (
-    event: JSX.TargetedDragEvent<HTMLInputElement>
-  ): void {
-    event.preventDefault()
-    setIsDropActive(false)
-  },
-  [])
+  const handleDragEnd = useCallback(
+    function (event: Event.onDragEnd<HTMLInputElement>): void {
+      onDragEnd(event)
+      event.preventDefault()
+      setIsDropActive(false)
+    },
+    [onDragEnd]
+  )
 
   const handleDrop = useCallback(
-    function (event: JSX.TargetedDragEvent<HTMLInputElement>): void {
-      if (typeof onSelectedFiles === 'undefined') {
-        return
-      }
-      event.preventDefault()
+    function (event: Event.onDrop<HTMLInputElement>): void {
+      onDrop(event)
       if (event.dataTransfer === null) {
         throw new Error('`event.dataTransfer` is `null`')
       }
-      const files = filterFiles(event.dataTransfer.files)
-      onSelectedFiles(files)
+      event.preventDefault()
+      const files = event.dataTransfer.files
+      onSelectedFiles(filterFiles({ acceptedFileTypes, files }))
       setIsDropActive(false)
     },
-    [filterFiles, onSelectedFiles]
+    [acceptedFileTypes, onDrop, onSelectedFiles]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -113,8 +132,9 @@ export function FileUploadDropzone({
     >
       <input
         {...rest}
+        ref={ref}
         accept={
-          typeof acceptedFileTypes === 'undefined'
+          acceptedFileTypes.length === 0
             ? undefined
             : acceptedFileTypes.join(',')
         }
@@ -136,4 +156,18 @@ export function FileUploadDropzone({
       <div class={styles.children}>{children}</div>
     </div>
   )
+})
+
+function filterFiles(options: {
+  files: FileList
+  acceptedFileTypes: Array<string>
+}): Array<File> {
+  const { files, acceptedFileTypes } = options
+  const result = Array.prototype.slice.call(files).sort(fileComparator)
+  if (acceptedFileTypes.length === 0) {
+    return result
+  }
+  return result.filter(function (file): boolean {
+    return acceptedFileTypes.indexOf(file.type) !== -1
+  })
 }
diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx
index 423ec86f2..aaf146297 100644
--- a/packages/ui/src/components/icon-button/icon-button.tsx
+++ b/packages/ui/src/components/icon-button/icon-button.tsx
@@ -1,46 +1,60 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './icon-button.module.css'
 
-export type IconButtonProps = {
+export interface IconButtonProps
+  extends FocusableComponentProps<HTMLButtonElement> {
   children: ComponentChildren
   disabled?: boolean
-  onClick?: JSX.MouseEventHandler<HTMLButtonElement>
-  propagateEscapeKeyDown?: boolean
+  onClick?: EventHandler.onClick<HTMLButtonElement>
 }
 
-export function IconButton({
-  children,
-  disabled = false,
-  onClick,
-  propagateEscapeKeyDown = true,
-  ...rest
-}: Props<HTMLButtonElement, IconButtonProps>): JSX.Element {
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLButtonElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      event.currentTarget.blur()
+export const IconButton = createComponent<HTMLButtonElement, IconButtonProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      children,
+      disabled = false,
+      onClick,
+      onKeyDown = noop,
+      propagateEscapeKeyDown = true,
+      ...rest
     },
-    [propagateEscapeKeyDown]
-  )
+    ref
+  ): JSX.Element {
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLButtonElement>): void {
+        onKeyDown(event)
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
+    )
 
-  return (
-    <button
-      {...rest}
-      class={styles.iconButton}
-      disabled={disabled === true}
-      onClick={disabled === true ? undefined : onClick}
-      onKeyDown={disabled === true ? undefined : handleKeyDown}
-      tabIndex={disabled === true ? -1 : 0}
-    >
-      <div class={styles.icon}>{children}</div>
-    </button>
-  )
-}
+    return (
+      <button
+        {...rest}
+        ref={ref}
+        class={styles.iconButton}
+        disabled={disabled === true}
+        onClick={disabled === true ? undefined : onClick}
+        onKeyDown={disabled === true ? undefined : handleKeyDown}
+        tabIndex={0}
+      >
+        <div class={styles.icon}>{children}</div>
+      </button>
+    )
+  }
+)
diff --git a/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx b/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx
index 6aa574ebf..07d537e14 100644
--- a/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx
+++ b/packages/ui/src/components/icon-toggle-button/icon-toggle-button.tsx
@@ -1,49 +1,61 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './icon-toggle-button.module.css'
 
-export type IconToggleButtonProps<Name extends string> = {
+export interface IconToggleButtonProps
+  extends FocusableComponentProps<HTMLInputElement> {
   children: ComponentChildren
   disabled?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<boolean, Name>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<boolean>
   value: boolean
 }
 
-export function IconToggleButton<Name extends string>({
-  children,
-  disabled = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  propagateEscapeKeyDown = true,
-  value,
-  ...rest
-}: Props<HTMLInputElement, IconToggleButtonProps<Name>>): JSX.Element {
+export const IconToggleButton = createComponent<
+  HTMLInputElement,
+  IconToggleButtonProps
+>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    children,
+    disabled = false,
+    onChange = noop,
+    onKeyDown = noop,
+    onValueChange = noop,
+    propagateEscapeKeyDown = true,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      onValueChange(!value, name)
+    function (event: Event.onChange<HTMLInputElement>): void {
+      onValueChange(!(value === true))
       onChange(event)
     },
-    [name, onChange, onValueChange, value]
+    [onChange, onValueChange, value]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -55,13 +67,13 @@ export function IconToggleButton<Name extends string>({
     >
       <input
         {...rest}
+        ref={ref}
         checked={value === true}
         class={styles.input}
         disabled={disabled === true}
-        name={name}
         onChange={handleChange}
         onKeyDown={disabled === true ? undefined : handleKeyDown}
-        tabIndex={disabled === true ? -1 : 0}
+        tabIndex={0}
         type="checkbox"
       />
       <div class={styles.box}>
@@ -69,4 +81,4 @@ export function IconToggleButton<Name extends string>({
       </div>
     </label>
   )
-}
+})
diff --git a/packages/ui/src/components/layer/layer.tsx b/packages/ui/src/components/layer/layer.tsx
index 9d5a1f699..e80f148db 100644
--- a/packages/ui/src/components/layer/layer.tsx
+++ b/packages/ui/src/components/layer/layer.tsx
@@ -1,56 +1,64 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './layer.module.css'
 
-export type LayerProps<Name extends string> = {
+export interface LayerProps extends FocusableComponentProps<HTMLInputElement> {
   bold?: boolean
   children: ComponentChildren
   component?: boolean
   description?: string
   icon: ComponentChildren
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<boolean, Name>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<boolean>
   value: boolean
 }
 
-export function Layer<Name extends string>({
-  bold = false,
-  children,
-  description,
-  component = false,
-  icon,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  propagateEscapeKeyDown = true,
-  value,
-  ...rest
-}: Props<HTMLInputElement, LayerProps<Name>>): JSX.Element {
+export const Layer = createComponent<HTMLInputElement, LayerProps>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    bold = false,
+    children,
+    component = false,
+    description,
+    icon,
+    onChange = noop,
+    onKeyDown = noop,
+    onValueChange = noop,
+    propagateEscapeKeyDown = true,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const newValue = event.currentTarget.checked
-      onValueChange(newValue, name)
+    function (event: Event.onChange<HTMLInputElement>): void {
       onChange(event)
+      const newValue = event.currentTarget.checked === true
+      onValueChange(newValue)
     },
-    [name, onChange, onValueChange]
+    [onChange, onValueChange]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -63,9 +71,9 @@ export function Layer<Name extends string>({
     >
       <input
         {...rest}
+        ref={ref}
         checked={value === true}
         class={styles.input}
-        name={name}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         tabIndex={0}
@@ -79,4 +87,4 @@ export function Layer<Name extends string>({
       )}
     </label>
   )
-}
+})
diff --git a/packages/ui/src/components/loading-indicator/loading-indicator.tsx b/packages/ui/src/components/loading-indicator/loading-indicator.tsx
index 15aaf878a..eb4a1dd92 100644
--- a/packages/ui/src/components/loading-indicator/loading-indicator.tsx
+++ b/packages/ui/src/components/loading-indicator/loading-indicator.tsx
@@ -1,19 +1,19 @@
 import { h, JSX } from 'preact'
 
 import { IconColor } from '../../types/colors.js'
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './loading-indicator.module.css'
 
 export type LoadingIndicatorProps = {
   color?: IconColor
 }
 
-export function LoadingIndicator({
-  color,
-  ...rest
-}: Props<HTMLDivElement, LoadingIndicatorProps>): JSX.Element {
+export const LoadingIndicator = createComponent<
+  HTMLDivElement,
+  LoadingIndicatorProps
+>(function ({ color, ...rest }, ref): JSX.Element {
   return (
-    <div {...rest} class={styles.loadingIndicator}>
+    <div {...rest} ref={ref} class={styles.loadingIndicator}>
       <svg
         class={styles.svg}
         style={
@@ -28,4 +28,4 @@ export function LoadingIndicator({
       </svg>
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx
index 839a102a7..6fdbd5cb1 100644
--- a/packages/ui/src/components/modal/modal.tsx
+++ b/packages/ui/src/components/modal/modal.tsx
@@ -26,7 +26,7 @@ export type ModalPosition = 'bottom' | 'center' | 'left' | 'right'
 
 const rootElements: Array<HTMLDivElement> = [] // Stack of currently-open modals
 
-export function Modal({
+export const Modal = function ({
   children,
   closeButtonIcon = <IconCross32 />,
   closeButtonPosition = 'right',
diff --git a/packages/ui/src/components/preview/preview.tsx b/packages/ui/src/components/preview/preview.tsx
index 553ccac6c..45611f88b 100644
--- a/packages/ui/src/components/preview/preview.tsx
+++ b/packages/ui/src/components/preview/preview.tsx
@@ -1,19 +1,19 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import style from './preview.module.css'
 
 export type PreviewProps = {
   children: ComponentChildren
 }
 
-export function Preview({
-  children,
-  ...rest
-}: Props<HTMLDivElement, PreviewProps>): JSX.Element {
+export const Preview = createComponent<HTMLDivElement, PreviewProps>(function (
+  { children, ...rest },
+  ref
+): JSX.Element {
   return (
-    <div {...rest} class={style.preview}>
+    <div {...rest} ref={ref} class={style.preview}>
       {children}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/radio-buttons/radio-buttons.tsx b/packages/ui/src/components/radio-buttons/radio-buttons.tsx
index 359432d1c..176140292 100644
--- a/packages/ui/src/components/radio-buttons/radio-buttons.tsx
+++ b/packages/ui/src/components/radio-buttons/radio-buttons.tsx
@@ -2,112 +2,114 @@ import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { Stack, StackSpace } from '../../layout/stack/stack.js'
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './radio-buttons.module.css'
 
 const ITEM_ID_DATA_ATTRIBUTE_NAME = 'data-radio-buttons-item-id'
 
-export type RadioButtonsProps<
-  Name extends string,
-  Value extends boolean | number | string
-> = {
+export interface RadioButtonsProps
+  extends FocusableComponentProps<HTMLDivElement> {
   disabled?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<Value, Name>
-  options: Array<RadioButtonsOption<Value>>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<string>
+  options: Array<RadioButtonsOption>
   space?: StackSpace
-  value: null | Value
+  value: null | string
 }
-export type RadioButtonsOption<
-  Value extends boolean | number | string = string
-> = {
+export type RadioButtonsOption = {
   disabled?: boolean
   children?: ComponentChildren
-  value: Value
+  value: string
 }
 
-export function RadioButtons<
-  Name extends string,
-  Value extends boolean | number | string
->({
-  disabled = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  options,
-  propagateEscapeKeyDown = true,
-  space = 'small',
-  value,
-  ...rest
-}: Props<HTMLInputElement, RadioButtonsProps<Name, Value>>): JSX.Element {
-  const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const id = event.currentTarget.getAttribute(
-        ITEM_ID_DATA_ATTRIBUTE_NAME
-      ) as string
-      const newValue = options[parseInt(id, 10)].value
-      onValueChange(newValue, name)
-      onChange(event)
+export const RadioButtons = createComponent<HTMLDivElement, RadioButtonsProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      disabled = false,
+      onChange = noop,
+      onKeyDown = noop,
+      onValueChange = noop,
+      options,
+      propagateEscapeKeyDown = true,
+      space = 'small',
+      value,
+      ...rest
     },
-    [name, onChange, onValueChange, options]
-  )
+    ref
+  ): JSX.Element {
+    const handleChange = useCallback(
+      function (event: Event.onChange<HTMLInputElement>): void {
+        const id = event.currentTarget.getAttribute(
+          ITEM_ID_DATA_ATTRIBUTE_NAME
+        ) as string
+        const newValue = options[parseInt(id, 10)].value
+        onValueChange(newValue)
+        onChange(event)
+      },
+      [onChange, onValueChange, options]
+    )
 
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      event.currentTarget.blur()
-    },
-    [propagateEscapeKeyDown]
-  )
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onKeyDown(event)
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
+    )
 
-  return (
-    <div class={styles.radioButtons}>
-      <Stack space={space}>
-        {options.map(function (
-          option: RadioButtonsOption<Value>,
-          index: number
-        ): JSX.Element {
-          const children =
-            typeof option.children === 'undefined'
-              ? `${option.value}`
-              : option.children
-          const isOptionDisabled = disabled === true || option.disabled === true
-          return (
-            <label
-              key={index}
-              class={createClassName([
-                styles.label,
-                isOptionDisabled === true ? styles.disabled : null
-              ])}
-            >
-              <input
-                {...rest}
-                checked={value === option.value}
-                class={styles.input}
-                disabled={isOptionDisabled === true}
-                name={name}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                tabIndex={isOptionDisabled === true ? -1 : 0}
-                type="radio"
-                value={`${option.value}`}
-                {...{ [ITEM_ID_DATA_ATTRIBUTE_NAME]: `${index}` }}
-              />
-              <div class={styles.fill} />
-              <div class={styles.border} />
-              <div class={styles.children}>{children}</div>
-            </label>
-          )
-        })}
-      </Stack>
-    </div>
-  )
-}
+    return (
+      <div {...rest} ref={ref} class={styles.radioButtons}>
+        <Stack space={space}>
+          {options.map(function (
+            option: RadioButtonsOption,
+            index: number
+          ): JSX.Element {
+            const children =
+              typeof option.children === 'undefined'
+                ? `${option.value}`
+                : option.children
+            const isOptionDisabled =
+              disabled === true || option.disabled === true
+            return (
+              <label
+                key={index}
+                class={createClassName([
+                  styles.label,
+                  isOptionDisabled === true ? styles.disabled : null
+                ])}
+              >
+                <input
+                  checked={value === option.value}
+                  class={styles.input}
+                  disabled={isOptionDisabled === true}
+                  onChange={handleChange}
+                  onKeyDown={handleKeyDown}
+                  tabIndex={0}
+                  type="radio"
+                  value={`${option.value}`}
+                  {...{ [ITEM_ID_DATA_ATTRIBUTE_NAME]: `${index}` }}
+                />
+                <div class={styles.fill} />
+                <div class={styles.border} />
+                <div class={styles.children}>{children}</div>
+              </label>
+            )
+          })}
+        </Stack>
+      </div>
+    )
+  }
+)
diff --git a/packages/ui/src/components/radio-buttons/stories/radio-buttons-selected.stories.tsx b/packages/ui/src/components/radio-buttons/stories/radio-buttons-selected.stories.tsx
index eb834548c..04478294d 100644
--- a/packages/ui/src/components/radio-buttons/stories/radio-buttons-selected.stories.tsx
+++ b/packages/ui/src/components/radio-buttons/stories/radio-buttons-selected.stories.tsx
@@ -88,39 +88,6 @@ export const DisabledOption = function () {
   )
 }
 
-export const BooleanValue = function () {
-  const [value, setValue] = useState<boolean>(false)
-  const options: Array<RadioButtonsOption<boolean>> = [
-    { children: <Text>foo</Text>, value: true },
-    { children: <Text>bar</Text>, value: false }
-  ]
-  function handleChange(event: JSX.TargetedEvent<HTMLInputElement>) {
-    const newValue = event.currentTarget.value
-    console.log(newValue)
-    setValue(newValue === 'true' ? true : false)
-  }
-  return (
-    <RadioButtons onChange={handleChange} options={options} value={value} />
-  )
-}
-
-export const NumberValue = function () {
-  const [value, setValue] = useState<number>(2)
-  const options: Array<RadioButtonsOption<number>> = [
-    { children: <Text>foo</Text>, value: 1 },
-    { children: <Text>bar</Text>, value: 2 },
-    { children: <Text>baz</Text>, value: 3 }
-  ]
-  function handleChange(event: JSX.TargetedEvent<HTMLInputElement>) {
-    const newValue = event.currentTarget.value
-    console.log(newValue)
-    setValue(parseInt(newValue, 10))
-  }
-  return (
-    <RadioButtons onChange={handleChange} options={options} value={value} />
-  )
-}
-
 export const Space = function () {
   const [value, setValue] = useState<string>('bar')
   const options: Array<RadioButtonsOption> = [
diff --git a/packages/ui/src/components/range-slider/range-slider.tsx b/packages/ui/src/components/range-slider/range-slider.tsx
index 91f097f2a..98eff21f3 100644
--- a/packages/ui/src/components/range-slider/range-slider.tsx
+++ b/packages/ui/src/components/range-slider/range-slider.tsx
@@ -1,79 +1,91 @@
 import { h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './range-slider.module.css'
 
-export type RangeSliderProps<Name extends string> = {
+export interface RangeSliderProps
+  extends FocusableComponentProps<HTMLInputElement> {
   disabled?: boolean
   increment?: number
   maximum: number
   minimum: number
-  name?: Name
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onNumericValueInput?: OnValueChange<number, Name>
-  onValueInput?: OnValueChange<string, Name>
-  propagateEscapeKeyDown?: boolean
+  onInput?: EventHandler.onInput<HTMLInputElement>
+  onNumericValueInput?: EventHandler.onValueChange<number>
+  onValueInput?: EventHandler.onValueChange<string>
   value: string
 }
 
-export function RangeSlider<Name extends string>({
-  disabled = false,
-  increment = 1,
-  maximum,
-  minimum,
-  name,
-  onInput = function () {},
-  onNumericValueInput = function () {},
-  onValueInput = function () {},
-  propagateEscapeKeyDown = true,
-  value,
-  ...rest
-}: Props<HTMLInputElement, RangeSliderProps<Name>>): JSX.Element {
-  const handleInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>) {
-      onInput(event)
-      const value = event.currentTarget.value
-      onValueInput(value, name)
-      onNumericValueInput(parseFloat(value), name)
+export const RangeSlider = createComponent<HTMLInputElement, RangeSliderProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      disabled = false,
+      increment = 1,
+      maximum,
+      minimum,
+      onInput = noop,
+      onKeyDown = noop,
+      onNumericValueInput = noop,
+      onValueInput = noop,
+      propagateEscapeKeyDown = true,
+      value,
+      ...rest
     },
-    [name, onInput, onNumericValueInput, onValueInput]
-  )
+    ref
+  ): JSX.Element {
+    const handleInput = useCallback(
+      function (event: Event.onInput<HTMLInputElement>) {
+        onInput(event)
+        const value = event.currentTarget.value
+        onValueInput(value)
+        onNumericValueInput(parseFloat(value))
+      },
+      [onInput, onNumericValueInput, onValueInput]
+    )
 
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      event.currentTarget.blur()
-    },
-    [propagateEscapeKeyDown]
-  )
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onKeyDown(event)
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
+    )
 
-  return (
-    <label
-      class={createClassName([
-        styles.rangeSlider,
-        disabled === true ? styles.disabled : null
-      ])}
-    >
-      <input
-        class={styles.input}
-        disabled={disabled}
-        max={maximum}
-        min={minimum}
-        onInput={handleInput}
-        onKeyDown={handleKeyDown}
-        step={increment}
-        type="range"
-        value={value}
-        {...rest}
-      />
-      <div class={styles.border} />
-    </label>
-  )
-}
+    return (
+      <label
+        class={createClassName([
+          styles.rangeSlider,
+          disabled === true ? styles.disabled : null
+        ])}
+      >
+        <input
+          {...rest}
+          ref={ref}
+          class={styles.input}
+          disabled={disabled}
+          max={maximum}
+          min={minimum}
+          onInput={handleInput}
+          onKeyDown={handleKeyDown}
+          step={increment}
+          type="range"
+          value={value}
+        />
+        <div class={styles.border} />
+      </label>
+    )
+  }
+)
diff --git a/packages/ui/src/components/search-textbox/search-textbox.tsx b/packages/ui/src/components/search-textbox/search-textbox.tsx
index d155c0f21..808656052 100644
--- a/packages/ui/src/components/search-textbox/search-textbox.tsx
+++ b/packages/ui/src/components/search-textbox/search-textbox.tsx
@@ -3,54 +3,64 @@ import { useCallback, useRef } from 'preact/hooks'
 
 import { IconCross32 } from '../../icons/icon-32/icon-cross-32.js'
 import { IconSearch32 } from '../../icons/icon-32/icon-search-32.js'
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../utilities/get-current-from-ref.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './search-textbox.module.css'
 
 const EMPTY_STRING = ''
 
-export type SearchTextboxProps<Name extends string> = {
+export interface SearchTextboxProps
+  extends FocusableComponentProps<HTMLInputElement> {
   clearOnEscapeKeyDown?: boolean
   disabled?: boolean
-  name?: Name
-  onFocus?: OmitThisParameter<JSX.FocusEventHandler<HTMLInputElement>>
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onKeyDown?: OmitThisParameter<JSX.KeyboardEventHandler<HTMLInputElement>>
-  onValueInput?: OnValueChange<string, Name>
+  onFocus?: EventHandler.onFocus<HTMLInputElement>
+  onInput?: EventHandler.onInput<HTMLInputElement>
+  onKeyDown?: EventHandler.onKeyDown<HTMLInputElement>
+  onValueInput?: (value: string) => void
   placeholder?: string
-  propagateEscapeKeyDown?: boolean
   spellCheck?: boolean
   value: string
 }
 
-export function SearchTextbox<Name extends string>({
-  clearOnEscapeKeyDown = false,
-  disabled = false,
-  name,
-  onFocus = function () {},
-  onInput = function () {},
-  onKeyDown = function () {},
-  onValueInput = function () {},
-  placeholder,
-  propagateEscapeKeyDown = true,
-  spellCheck = false,
-  value,
-  ...rest
-}: Props<HTMLInputElement, SearchTextboxProps<Name>>): JSX.Element {
+export const SearchTextbox = createComponent<
+  HTMLInputElement,
+  SearchTextboxProps
+>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    clearOnEscapeKeyDown = false,
+    disabled = false,
+    onFocus = noop,
+    onInput = noop,
+    onKeyDown = noop,
+    onValueInput = noop,
+    placeholder,
+    propagateEscapeKeyDown = true,
+    spellCheck = false,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const inputElementRef: RefObject<HTMLInputElement> = useRef(null)
 
   const handleClearButtonClick = useCallback(function (): void {
     const inputElement = getCurrentFromRef(inputElementRef)
     inputElement.value = EMPTY_STRING
-    const inputEvent = document.createEvent('Event')
-    inputEvent.initEvent('input', true, true)
+    const inputEvent = new window.Event('input', {
+      bubbles: true,
+      cancelable: true
+    })
     inputElement.dispatchEvent(inputEvent)
     inputElement.focus()
   }, [])
 
   const handleFocus = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
+    function (event: Event.onFocus<HTMLInputElement>): void {
       onFocus(event)
       event.currentTarget.select()
     },
@@ -58,15 +68,15 @@ export function SearchTextbox<Name extends string>({
   )
 
   const handleInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      onValueInput(event.currentTarget.value, name)
+    function (event: Event.onInput<HTMLInputElement>): void {
+      onValueInput(event.currentTarget.value)
       onInput(event)
     },
-    [name, onInput, onValueInput]
+    [onInput, onValueInput]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
       onKeyDown(event)
       if (event.key !== 'Escape') {
         return
@@ -83,9 +93,12 @@ export function SearchTextbox<Name extends string>({
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
     [
+      blurOnEscapeKeyDown,
       clearOnEscapeKeyDown,
       handleClearButtonClick,
       onKeyDown,
@@ -94,6 +107,21 @@ export function SearchTextbox<Name extends string>({
     ]
   )
 
+  const refCallback = useCallback(
+    function (inputElement: null | HTMLInputElement) {
+      inputElementRef.current = inputElement
+      if (ref === null) {
+        return
+      }
+      if (typeof ref === 'function') {
+        ref(inputElement)
+        return
+      }
+      ref.current = inputElement
+    },
+    [ref, inputElementRef]
+  )
+
   return (
     <div
       class={createClassName([
@@ -103,10 +131,9 @@ export function SearchTextbox<Name extends string>({
     >
       <input
         {...rest}
-        ref={inputElementRef}
+        ref={refCallback}
         class={styles.input}
         disabled={disabled === true}
-        name={name}
         onFocus={handleFocus}
         onInput={handleInput}
         onKeyDown={handleKeyDown}
@@ -130,4 +157,4 @@ export function SearchTextbox<Name extends string>({
       )}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/search-textbox/stories/search-textbox.stories.tsx b/packages/ui/src/components/search-textbox/stories/search-textbox.stories.tsx
index 462faf3b7..a4f0d2354 100644
--- a/packages/ui/src/components/search-textbox/stories/search-textbox.stories.tsx
+++ b/packages/ui/src/components/search-textbox/stories/search-textbox.stories.tsx
@@ -80,7 +80,7 @@ export const Placeholder = function () {
   return (
     <SearchTextbox
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
diff --git a/packages/ui/src/components/segmented-control/segmented-control.tsx b/packages/ui/src/components/segmented-control/segmented-control.tsx
index ed852cf08..613e453b2 100644
--- a/packages/ui/src/components/segmented-control/segmented-control.tsx
+++ b/packages/ui/src/components/segmented-control/segmented-control.tsx
@@ -1,68 +1,69 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './segmented-control.module.css'
 
 const ITEM_ID_DATA_ATTRIBUTE_NAME = 'data-segmented-control-item-id'
 
-export type SegmentedControlProps<
-  Name extends string,
-  Value extends boolean | number | string
-> = {
+export interface SegmentedControlProps
+  extends FocusableComponentProps<HTMLInputElement> {
   disabled?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<Value, Name>
-  options: Array<SegmentedControlOption<Value>>
-  propagateEscapeKeyDown?: boolean
-  value: Value
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<string>
+  options: Array<SegmentedControlOption>
+  value: string
 }
-export type SegmentedControlOption<
-  Value extends boolean | number | string = string
-> = {
+export type SegmentedControlOption = {
   disabled?: boolean
   children?: ComponentChildren
-  value: Value
+  value: string
 }
 
-export function SegmentedControl<
-  Name extends string,
-  Value extends boolean | number | string
->({
+export const SegmentedControl = createComponent<
+  HTMLInputElement,
+  SegmentedControlProps
+>(function ({
+  blurOnEscapeKeyDown = true,
   disabled = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
+  onChange = noop,
+  onKeyDown = noop,
+  onValueChange = noop,
   options,
   propagateEscapeKeyDown = true,
   value,
   ...rest
-}: Props<HTMLInputElement, SegmentedControlProps<Name, Value>>): JSX.Element {
+}): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>): void {
       const id = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
       const newValue = options[parseInt(id, 10)].value
-      onValueChange(newValue, name)
+      onValueChange(newValue)
       onChange(event)
     },
-    [name, onChange, onValueChange, options]
+    [onChange, onValueChange, options]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -74,7 +75,7 @@ export function SegmentedControl<
     >
       <div class={styles.labels}>
         {options.map(function (
-          option: SegmentedControlOption<Value>,
+          option: SegmentedControlOption,
           index: number
         ): JSX.Element {
           const children =
@@ -89,10 +90,9 @@ export function SegmentedControl<
                 checked={value === option.value}
                 class={styles.input}
                 disabled={isOptionDisabled === true}
-                name={name}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
-                tabIndex={isOptionDisabled === true ? -1 : 0}
+                tabIndex={0}
                 type="radio"
                 value={`${option.value}`}
                 {...{ [ITEM_ID_DATA_ATTRIBUTE_NAME]: `${index}` }}
@@ -111,4 +111,4 @@ export function SegmentedControl<
       <div class={styles.border} />
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/segmented-control/stories/segmented-control.stories.tsx b/packages/ui/src/components/segmented-control/stories/segmented-control.stories.tsx
index 03bc06969..d08ff0962 100644
--- a/packages/ui/src/components/segmented-control/stories/segmented-control.stories.tsx
+++ b/packages/ui/src/components/segmented-control/stories/segmented-control.stories.tsx
@@ -88,39 +88,6 @@ export const DisabledOption = function () {
   )
 }
 
-export const BooleanValue = function () {
-  const [value, setValue] = useState<boolean>(false)
-  const options: Array<SegmentedControlOption<boolean>> = [
-    { children: 'foo', value: true },
-    { children: 'bar', value: false }
-  ]
-  function handleChange(event: JSX.TargetedEvent<HTMLInputElement>) {
-    const newValue = event.currentTarget.value
-    console.log(newValue)
-    setValue(newValue === 'true' ? true : false)
-  }
-  return (
-    <SegmentedControl onChange={handleChange} options={options} value={value} />
-  )
-}
-
-export const NumberValue = function () {
-  const [value, setValue] = useState<number>(2)
-  const options: Array<SegmentedControlOption<number>> = [
-    { children: 'foo', value: 1 },
-    { children: 'bar', value: 2 },
-    { children: 'baz', value: 3 }
-  ]
-  function handleChange(event: JSX.TargetedEvent<HTMLInputElement>) {
-    const newValue = event.currentTarget.value
-    console.log(newValue)
-    setValue(parseInt(newValue, 10))
-  }
-  return (
-    <SegmentedControl onChange={handleChange} options={options} value={value} />
-  )
-}
-
 export const IconChildren = function () {
   const [value, setValue] = useState<string>('align-left')
   const options: Array<SegmentedControlOption> = [
@@ -140,6 +107,11 @@ export const IconChildren = function () {
 
 export const OnValueChange = function () {
   const [value, setValue] = useState<string>('bar')
+  const options: Array<SegmentedControlOption> = [
+    { value: 'foo' },
+    { value: 'bar' },
+    { value: 'baz' }
+  ]
   function handleValueChange(newValue: string) {
     console.log(newValue)
     setValue(newValue)
@@ -147,7 +119,7 @@ export const OnValueChange = function () {
   return (
     <SegmentedControl
       onValueChange={handleValueChange}
-      options={[{ value: 'foo' }, { value: 'bar' }, { value: 'baz' }]}
+      options={options}
       value={value}
     />
   )
diff --git a/packages/ui/src/components/selectable-item/selectable-item.tsx b/packages/ui/src/components/selectable-item/selectable-item.tsx
index c84ab54bb..8c655393e 100644
--- a/packages/ui/src/components/selectable-item/selectable-item.tsx
+++ b/packages/ui/src/components/selectable-item/selectable-item.tsx
@@ -2,53 +2,65 @@ import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
 import { IconMenuCheckmarkChecked16 } from '../../icons/icon-16/icon-menu-checkmark-checked-16.js'
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './selectable-item.module.css'
 
-export type SelectableItemProps<Name extends string> = {
+export interface SelectableItemProps
+  extends FocusableComponentProps<HTMLInputElement> {
   bold?: boolean
   children: ComponentChildren
   disabled?: boolean
   indent?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<boolean, Name>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<boolean>
   value: boolean
 }
 
-export function SelectableItem<Name extends string>({
-  bold = false,
-  children,
-  disabled = false,
-  indent = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  propagateEscapeKeyDown = true,
-  value,
-  ...rest
-}: Props<HTMLInputElement, SelectableItemProps<Name>>): JSX.Element {
+export const SelectableItem = createComponent<
+  HTMLInputElement,
+  SelectableItemProps
+>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    bold = false,
+    children,
+    disabled = false,
+    indent = false,
+    onChange = noop,
+    onKeyDown = noop,
+    onValueChange = noop,
+    propagateEscapeKeyDown = true,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      onValueChange(!value, name)
+    function (event: Event.onChange<HTMLInputElement>): void {
+      onValueChange(!(value === true))
       onChange(event)
     },
-    [name, onChange, onValueChange, value]
+    [onChange, onValueChange, value]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   return (
@@ -62,13 +74,13 @@ export function SelectableItem<Name extends string>({
     >
       <input
         {...rest}
+        ref={ref}
         checked={value === true}
         class={styles.input}
         disabled={disabled === true}
-        name={name}
         onChange={handleChange}
         onKeyDown={disabled === true ? undefined : handleKeyDown}
-        tabIndex={disabled === true ? -1 : 0}
+        tabIndex={0}
         type="checkbox"
       />
       <div class={styles.box} />
@@ -80,4 +92,4 @@ export function SelectableItem<Name extends string>({
       ) : null}
     </label>
   )
-}
+})
diff --git a/packages/ui/src/components/tabs/tabs.tsx b/packages/ui/src/components/tabs/tabs.tsx
index 553f064f7..9225f9131 100644
--- a/packages/ui/src/components/tabs/tabs.tsx
+++ b/packages/ui/src/components/tabs/tabs.tsx
@@ -1,17 +1,18 @@
 import { ComponentChildren, Fragment, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './tabs.module.css'
 
 const ITEM_ID_DATA_ATTRIBUTE_NAME = 'data-tabs-item-id'
 
-export type TabsProps<Name extends string> = {
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<string, Name>
+export interface TabsProps extends FocusableComponentProps<HTMLDivElement> {
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<string>
   options: Array<TabsOption>
-  propagateEscapeKeyDown?: boolean
   value: null | string
 }
 export type TabsOption = {
@@ -19,38 +20,45 @@ export type TabsOption = {
   value: string
 }
 
-export function Tabs<Name extends string>({
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
-  options,
-  propagateEscapeKeyDown = true,
-  value,
-  ...rest
-}: Props<HTMLInputElement, TabsProps<Name>>): JSX.Element {
+export const Tabs = createComponent<HTMLDivElement, TabsProps>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    onChange = noop,
+    onKeyDown = noop,
+    onValueChange = noop,
+    options,
+    propagateEscapeKeyDown = true,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>): void {
       const id = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
       const newValue = options[parseInt(id, 10)].value
-      onValueChange(newValue, name)
+      onValueChange(newValue)
       onChange(event)
     },
-    [name, onChange, onValueChange, options]
+    [onChange, onValueChange, options]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, onKeyDown, propagateEscapeKeyDown]
   )
 
   const activeOption = options.find(function (option: TabsOption): boolean {
@@ -59,7 +67,7 @@ export function Tabs<Name extends string>({
 
   return (
     <Fragment>
-      <div class={styles.tabs}>
+      <div ref={ref} class={styles.tabs}>
         {options.map(function (option: TabsOption, index: number): JSX.Element {
           return (
             <label key={index} class={styles.label}>
@@ -67,7 +75,6 @@ export function Tabs<Name extends string>({
                 {...rest}
                 checked={value === option.value}
                 class={styles.input}
-                name={name}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
                 tabIndex={0}
@@ -85,4 +92,4 @@ export function Tabs<Name extends string>({
       )}
     </Fragment>
   )
-}
+})
diff --git a/packages/ui/src/components/text/text.tsx b/packages/ui/src/components/text/text.tsx
index 535f19b50..a808c2c4d 100644
--- a/packages/ui/src/components/text/text.tsx
+++ b/packages/ui/src/components/text/text.tsx
@@ -1,7 +1,7 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './text.module.css'
 
 export type TextProps = {
@@ -11,12 +11,12 @@ export type TextProps = {
 }
 export type TextAlignment = 'left' | 'center' | 'right'
 
-export function Text({
+export const Text = createComponent<HTMLDivElement, TextProps>(function ({
   align = 'left',
   children,
   numeric = false,
   ...rest
-}: Props<HTMLDivElement, TextProps>): JSX.Element {
+}): JSX.Element {
   return (
     <div
       {...rest}
@@ -29,4 +29,4 @@ export function Text({
       {children}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-border.stories.tsx b/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-border.stories.tsx
index 9b0a86b7f..66a7858c4 100644
--- a/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-border.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-border.stories.tsx
@@ -87,7 +87,7 @@ export const Placeholder = function () {
     <TextboxAutocomplete
       onInput={handleInput}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -114,7 +114,7 @@ export const PlaceholderFocused = function () {
       {...useInitialFocus()}
       onInput={handleInput}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
diff --git a/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-default.stories.tsx b/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-default.stories.tsx
index 03d0937f4..7d23c9d15 100644
--- a/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-default.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-default.stories.tsx
@@ -85,7 +85,7 @@ export const Placeholder = function () {
     <TextboxAutocomplete
       onInput={handleInput}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
@@ -111,7 +111,7 @@ export const PlaceholderFocused = function () {
       {...useInitialFocus()}
       onInput={handleInput}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
diff --git a/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-underline.stories.tsx b/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-underline.stories.tsx
index 4401d5b02..639000e08 100644
--- a/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-underline.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-autocomplete/stories/textbox-autocomplete-underline.stories.tsx
@@ -87,7 +87,7 @@ export const Placeholder = function () {
     <TextboxAutocomplete
       onInput={handleInput}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -114,7 +114,7 @@ export const PlaceholderFocused = function () {
       {...useInitialFocus()}
       onInput={handleInput}
       options={options}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
diff --git a/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx b/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
index e58b4a4af..05f7e2ffb 100644
--- a/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
+++ b/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
@@ -4,9 +4,12 @@ import { useCallback, useRef, useState } from 'preact/hooks'
 import menuStyles from '../../../css/menu.module.css'
 import { useMouseDownOutside } from '../../../hooks/use-mouse-down-outside.js'
 import { IconMenuCheckmarkChecked16 } from '../../../icons/icon-16/icon-menu-checkmark-checked-16.js'
-import { OnValueChange, Props } from '../../../types/types.js'
+import { Event, EventHandler } from '../../../types/event-handler.js'
+import { FocusableComponentProps } from '../../../types/focusable-component-props'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../../utilities/get-current-from-ref.js'
+import { noop } from '../../../utilities/no-op'
 import { computeNextValue } from '../private/compute-next-value.js'
 import { isKeyCodeCharacterGenerating } from '../private/is-keycode-character-generating.js'
 import textboxStyles from '../textbox/textbox.module.css'
@@ -17,16 +20,15 @@ const INVALID_ID = null
 const ITEM_ID_DATA_ATTRIBUTE_NAME = 'data-textbox-autocomplete-item-id'
 const MENU_VERTICAL_MARGIN = 16
 
-export type TextboxAutocompleteProps<Name extends string> = {
+export interface TextboxAutocompleteProps
+  extends FocusableComponentProps<HTMLInputElement> {
   disabled?: boolean
   filter?: boolean
   icon?: ComponentChildren
-  name?: Name
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueInput?: OnValueChange<string, Name>
+  onInput?: EventHandler.onInput<HTMLInputElement>
+  onValueInput?: EventHandler.onValueChange<string>
   options: Array<TextboxAutocompleteOption>
   placeholder?: string
-  propagateEscapeKeyDown?: boolean
   revertOnEscapeKeyDown?: boolean
   spellCheck?: boolean
   strict?: boolean
@@ -59,23 +61,30 @@ type OptionValueWithId = TextboxAutocompleteOptionValue & {
 }
 type Id = typeof INVALID_ID | string
 
-export function TextboxAutocomplete<Name extends string>({
-  disabled = false,
-  filter = false,
-  icon,
-  name,
-  onInput = function () {},
-  onValueInput = function () {},
-  placeholder,
-  propagateEscapeKeyDown = true,
-  revertOnEscapeKeyDown = false,
-  spellCheck = false,
-  strict = false,
-  top = false,
-  value,
-  variant,
-  ...rest
-}: Props<HTMLInputElement, TextboxAutocompleteProps<Name>>): JSX.Element {
+export const TextboxAutocomplete = createComponent<
+  HTMLInputElement,
+  TextboxAutocompleteProps
+>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    disabled = false,
+    filter = false,
+    icon,
+    onInput = noop,
+    onKeyDown = noop,
+    onValueInput = noop,
+    placeholder,
+    propagateEscapeKeyDown = true,
+    revertOnEscapeKeyDown = false,
+    spellCheck = false,
+    strict = false,
+    top = false,
+    value,
+    variant,
+    ...rest
+  },
+  ref
+): JSX.Element {
   if (typeof icon === 'string' && icon.length !== 1) {
     throw new Error(`String \`icon\` must be a single character: ${icon}`)
   }
@@ -97,14 +106,6 @@ export function TextboxAutocomplete<Name extends string>({
   // Uncomment to debug
   // console.table([{ isMenuVisible, selectedId, originalValue, editedValue, value }])
 
-  const triggerBlur = useCallback(function (): void {
-    setIsMenuVisible(false)
-    setOriginalValue(EMPTY_STRING)
-    setEditedValue(EMPTY_STRING)
-    setSelectedId(INVALID_ID)
-    getCurrentFromRef(inputElementRef).blur()
-  }, [])
-
   // Adjust the menu scroll position so that the selected option is always visible
   const updateScrollPosition = useCallback(function (id: Id): void {
     const menuElement = getCurrentFromRef(menuElementRef)
@@ -149,9 +150,19 @@ export function TextboxAutocomplete<Name extends string>({
     [options, updateScrollPosition]
   )
 
-  const handleFocus = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
-      setIsMenuVisible(true)
+  const triggerBlur = useCallback(function (): void {
+    getCurrentFromRef(inputElementRef).blur()
+  }, [])
+
+  const triggerHideMenu = useCallback(function (): void {
+    setIsMenuVisible(false)
+    setOriginalValue(EMPTY_STRING)
+    setEditedValue(EMPTY_STRING)
+    setSelectedId(INVALID_ID)
+  }, [])
+
+  const triggerShowMenu = useCallback(
+    function (): void {
       updateMenuElementMaxHeight(
         getCurrentFromRef(rootElementRef),
         getCurrentFromRef(menuElementRef),
@@ -159,29 +170,44 @@ export function TextboxAutocomplete<Name extends string>({
       )
       setOriginalValue(value)
       updateEditedValue(value)
-      const inputElement = event.currentTarget
-      inputElement.focus()
-      inputElement.select()
+      setIsMenuVisible(true)
     },
     [top, updateEditedValue, value]
   )
 
+  const handleFocus = useCallback(
+    function (event: Event.onFocus<HTMLInputElement>): void {
+      event.currentTarget.select()
+      if (isMenuVisible === false) {
+        triggerShowMenu()
+      }
+    },
+    [isMenuVisible, triggerShowMenu]
+  )
+
   const handleInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
+    function (event: Event.onInput<HTMLInputElement>): void {
+      if (isMenuVisible === false) {
+        triggerShowMenu()
+      }
       const newValue = event.currentTarget.value
       updateEditedValue(newValue)
-      onValueInput(newValue, name)
+      onValueInput(newValue)
       onInput(event)
     },
-    [name, onInput, onValueInput, updateEditedValue]
+    [isMenuVisible, onInput, onValueInput, triggerShowMenu, updateEditedValue]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
       const inputElement = event.currentTarget
       const key = event.key
       if (key === 'ArrowUp' || key === 'ArrowDown') {
         event.preventDefault()
+        if (isMenuVisible === false) {
+          triggerShowMenu()
+          return
+        }
         if (options.length === 0) {
           return
         }
@@ -193,7 +219,7 @@ export function TextboxAutocomplete<Name extends string>({
           // Reached beginning/end of list of `options`, so just restore `savedValue`
           setSelectedId(INVALID_ID)
           inputElement.value = editedValue
-          onValueInput(editedValue, name)
+          onValueInput(editedValue)
           onInput(event)
           updateScrollPosition(INVALID_ID)
           return
@@ -207,23 +233,43 @@ export function TextboxAutocomplete<Name extends string>({
         }
         const newValue = newOptionValue.value
         inputElement.value = newValue
-        onValueInput(newValue, name)
+        onValueInput(newValue)
         onInput(event)
         inputElement.select()
         return
       }
-      if (key === 'Enter' || key === 'Escape' || key === 'Tab') {
+      if (key === 'Escape') {
         event.preventDefault()
         if (propagateEscapeKeyDown === false) {
           event.stopPropagation()
         }
-        if (key === 'Escape' && revertOnEscapeKeyDown === true) {
+        if (isMenuVisible === false) {
+          triggerBlur()
+          return
+        }
+        if (revertOnEscapeKeyDown === true) {
           inputElement.value = originalValue
-          const inputEvent = document.createEvent('Event')
-          inputEvent.initEvent('input', true, true)
+          const inputEvent = new window.Event('input', {
+            bubbles: true,
+            cancelable: true
+          })
           inputElement.dispatchEvent(inputEvent)
         }
-        triggerBlur()
+        triggerHideMenu()
+        return
+      }
+      if (key === 'Enter') {
+        event.preventDefault()
+        inputElement.select()
+        if (isMenuVisible === false) {
+          triggerShowMenu()
+          return
+        }
+        triggerHideMenu()
+        return
+      }
+      if (key === 'Tab') {
+        triggerHideMenu()
         return
       }
       if (strict === false) {
@@ -242,7 +288,7 @@ export function TextboxAutocomplete<Name extends string>({
     },
     [
       editedValue,
-      name,
+      isMenuVisible,
       onInput,
       onValueInput,
       options,
@@ -252,12 +298,23 @@ export function TextboxAutocomplete<Name extends string>({
       selectedId,
       strict,
       triggerBlur,
+      triggerHideMenu,
+      triggerShowMenu,
       updateScrollPosition
     ]
   )
 
+  const handleMouseDown = useCallback(
+    function (): void {
+      if (isMenuVisible === false) {
+        triggerShowMenu()
+      }
+    },
+    [isMenuVisible, triggerShowMenu]
+  )
+
   const handlePaste = useCallback(
-    function (event: JSX.TargetedClipboardEvent<HTMLInputElement>): void {
+    function (event: Event.onPaste<HTMLInputElement>): void {
       if (strict === false) {
         return
       }
@@ -276,7 +333,7 @@ export function TextboxAutocomplete<Name extends string>({
   )
 
   const handleOptionChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
+    function (event: Event.onChange<HTMLInputElement>): void {
       const newId = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
@@ -288,16 +345,19 @@ export function TextboxAutocomplete<Name extends string>({
       }
       const inputElement = getCurrentFromRef(inputElementRef)
       inputElement.value = newOptionValue.value
-      const inputEvent = document.createEvent('Event')
-      inputEvent.initEvent('input', true, true)
+      const inputEvent = new window.Event('input', {
+        bubbles: true,
+        cancelable: true
+      })
       inputElement.dispatchEvent(inputEvent)
-      triggerBlur()
+      inputElement.focus()
+      triggerHideMenu()
     },
-    [options, triggerBlur]
+    [options, triggerHideMenu]
   )
 
   const handleOptionMouseMove = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
+    function (event: Event.onMouseMove<HTMLInputElement>): void {
       const newId = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
       ) as string
@@ -313,15 +373,31 @@ export function TextboxAutocomplete<Name extends string>({
       if (isMenuVisible === false) {
         return
       }
+      triggerHideMenu()
       triggerBlur()
     },
-    [isMenuVisible, triggerBlur]
+    [isMenuVisible, triggerBlur, triggerHideMenu]
   )
   useMouseDownOutside({
     onMouseDownOutside: handleMouseDownOutside,
     ref: rootElementRef
   })
 
+  const refCallback = useCallback(
+    function (inputElement: null | HTMLInputElement) {
+      inputElementRef.current = inputElement
+      if (ref === null) {
+        return
+      }
+      if (typeof ref === 'function') {
+        ref(inputElement)
+        return
+      }
+      ref.current = inputElement
+    },
+    [ref, inputElementRef]
+  )
+
   return (
     <div
       ref={rootElementRef}
@@ -339,16 +415,16 @@ export function TextboxAutocomplete<Name extends string>({
       <div class={textboxStyles.inner}>
         <input
           {...rest}
-          ref={inputElementRef}
+          ref={refCallback}
           class={textboxStyles.input}
           disabled={disabled === true}
-          name={name}
           onFocus={handleFocus}
           onInput={handleInput}
           onKeyDown={handleKeyDown}
+          onMouseDown={handleMouseDown}
           onPaste={handlePaste}
           placeholder={placeholder}
-          tabIndex={disabled === true ? -1 : 0}
+          tabIndex={0}
           type="text"
           value={value}
         />
@@ -400,7 +476,6 @@ export function TextboxAutocomplete<Name extends string>({
                   checked={value === option.value}
                   class={menuStyles.input}
                   disabled={option.disabled === true}
-                  name={name}
                   onChange={handleOptionChange}
                   onMouseMove={handleOptionMouseMove}
                   spellcheck={spellCheck}
@@ -422,7 +497,7 @@ export function TextboxAutocomplete<Name extends string>({
       </div>
     </div>
   )
-}
+})
 
 // Add an `id` attribute to all the `TextboxAutocompleteOptionValue` items in `options`
 function createOptions(
diff --git a/packages/ui/src/components/textbox/textbox-color/private/create-rgba-color.ts b/packages/ui/src/components/textbox/textbox-color/private/create-rgba-color.ts
index 8f286d91f..c1ca94a94 100644
--- a/packages/ui/src/components/textbox/textbox-color/private/create-rgba-color.ts
+++ b/packages/ui/src/components/textbox/textbox-color/private/create-rgba-color.ts
@@ -3,6 +3,8 @@ import {
   MIXED_STRING
 } from '@create-figma-plugin/utilities'
 
+import { RGBA } from '../../../../types/RGBA'
+
 export function createRgbaColor(
   hexColor: string,
   opacity: string
diff --git a/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-border.stories.tsx b/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-border.stories.tsx
index 77fe3d3ad..62645c446 100644
--- a/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-border.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-border.stories.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
-import { TextboxColor } from '../textbox-color.js'
+import { RGBA } from '../../../../types/RGBA.js'
+import { TextboxColor, TextboxColorRef } from '../textbox-color.js'
 
 export default {
   parameters: {
@@ -213,6 +214,31 @@ export const Mixed = function () {
   )
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [hexColor, setHexColor] = useState<string>('0D99FF')
+  const [opacity, setOpacity] = useState<string>('100%')
+  function handleHexColorInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newHexColor = event.currentTarget.value
+    console.log(newHexColor)
+    setHexColor(newHexColor)
+  }
+  function handleOpacityInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newOpacity = event.currentTarget.value
+    console.log(newOpacity)
+    setOpacity(newOpacity)
+  }
+  return (
+    <TextboxColor
+      blurOnEnterKeyDown
+      hexColor={hexColor}
+      onHexColorInput={handleHexColorInput}
+      onOpacityInput={handleOpacityInput}
+      opacity={opacity}
+      variant="border"
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [hexColor, setHexColor] = useState<string>('0D99FF')
   const [opacity, setOpacity] = useState<string>('100%')
@@ -259,3 +285,37 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<TextboxColorRef> = useRef(null)
+  const [hexColor, setHexColor] = useState<string>('0D99FF')
+  const [opacity, setOpacity] = useState<string>('100%')
+  function handleHexColorInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current.hexColorInputElement)
+    const newHexColor = ref.current.hexColorInputElement.value
+    console.log(newHexColor)
+    setHexColor(newHexColor)
+  }
+  function handleOpacityInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current.opacityInputElement)
+    const newOpacity = ref.current.opacityInputElement.value
+    console.log(newOpacity)
+    setOpacity(newOpacity)
+  }
+  return (
+    <TextboxColor
+      ref={ref}
+      hexColor={hexColor}
+      onHexColorInput={handleHexColorInput}
+      onOpacityInput={handleOpacityInput}
+      opacity={opacity}
+      variant="border"
+    />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-default.stories.tsx b/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-default.stories.tsx
index 4ee3b2c29..ae0f6bdc9 100644
--- a/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-default.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-default.stories.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
-import { TextboxColor } from '../textbox-color.js'
+import { RGBA } from '../../../../types/RGBA.js'
+import { TextboxColor, TextboxColorRef } from '../textbox-color.js'
 
 export default {
   parameters: {
@@ -205,6 +206,30 @@ export const Mixed = function () {
   )
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [hexColor, setHexColor] = useState<string>('0D99FF')
+  const [opacity, setOpacity] = useState<string>('100%')
+  function handleHexColorInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newHexColor = event.currentTarget.value
+    console.log(newHexColor)
+    setHexColor(newHexColor)
+  }
+  function handleOpacityInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newOpacity = event.currentTarget.value
+    console.log(newOpacity)
+    setOpacity(newOpacity)
+  }
+  return (
+    <TextboxColor
+      blurOnEnterKeyDown
+      hexColor={hexColor}
+      onHexColorInput={handleHexColorInput}
+      onOpacityInput={handleOpacityInput}
+      opacity={opacity}
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [hexColor, setHexColor] = useState<string>('0D99FF')
   const [opacity, setOpacity] = useState<string>('100%')
@@ -249,3 +274,36 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<TextboxColorRef> = useRef(null)
+  const [hexColor, setHexColor] = useState<string>('0D99FF')
+  const [opacity, setOpacity] = useState<string>('100%')
+  function handleHexColorInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current.hexColorInputElement)
+    const newHexColor = ref.current.hexColorInputElement.value
+    console.log(newHexColor)
+    setHexColor(newHexColor)
+  }
+  function handleOpacityInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current.opacityInputElement)
+    const newOpacity = ref.current.opacityInputElement.value
+    console.log(newOpacity)
+    setOpacity(newOpacity)
+  }
+  return (
+    <TextboxColor
+      ref={ref}
+      hexColor={hexColor}
+      onHexColorInput={handleHexColorInput}
+      onOpacityInput={handleOpacityInput}
+      opacity={opacity}
+    />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-underline.stories.tsx b/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-underline.stories.tsx
index 4c711ee53..58a092d2f 100644
--- a/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-underline.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-color/stories/textbox-color-underline.stories.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
-import { TextboxColor } from '../textbox-color.js'
+import { RGBA } from '../../../../types/RGBA.js'
+import { TextboxColor, TextboxColorRef } from '../textbox-color.js'
 
 export default {
   parameters: {
@@ -213,6 +214,31 @@ export const Mixed = function () {
   )
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [hexColor, setHexColor] = useState<string>('0D99FF')
+  const [opacity, setOpacity] = useState<string>('100%')
+  function handleHexColorInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newHexColor = event.currentTarget.value
+    console.log(newHexColor)
+    setHexColor(newHexColor)
+  }
+  function handleOpacityInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newOpacity = event.currentTarget.value
+    console.log(newOpacity)
+    setOpacity(newOpacity)
+  }
+  return (
+    <TextboxColor
+      blurOnEnterKeyDown
+      hexColor={hexColor}
+      onHexColorInput={handleHexColorInput}
+      onOpacityInput={handleOpacityInput}
+      opacity={opacity}
+      variant="underline"
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [hexColor, setHexColor] = useState<string>('0D99FF')
   const [opacity, setOpacity] = useState<string>('100%')
@@ -259,3 +285,37 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<TextboxColorRef> = useRef(null)
+  const [hexColor, setHexColor] = useState<string>('0D99FF')
+  const [opacity, setOpacity] = useState<string>('100%')
+  function handleHexColorInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current.hexColorInputElement)
+    const newHexColor = ref.current.hexColorInputElement.value
+    console.log(newHexColor)
+    setHexColor(newHexColor)
+  }
+  function handleOpacityInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current.opacityInputElement)
+    const newOpacity = ref.current.opacityInputElement.value
+    console.log(newOpacity)
+    setOpacity(newOpacity)
+  }
+  return (
+    <TextboxColor
+      ref={ref}
+      hexColor={hexColor}
+      onHexColorInput={handleHexColorInput}
+      onOpacityInput={handleOpacityInput}
+      opacity={opacity}
+      variant="underline"
+    />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox-color/textbox-color.module.css b/packages/ui/src/components/textbox/textbox-color/textbox-color.module.css
index 962a9da00..54fc6263e 100644
--- a/packages/ui/src/components/textbox/textbox-color/textbox-color.module.css
+++ b/packages/ui/src/components/textbox/textbox-color/textbox-color.module.css
@@ -116,7 +116,9 @@
 }
 .hasBorder .divider,
 .textboxColor:not(.disabled) .input:hover ~ .divider,
-.textboxColor:not(.disabled) .input:focus ~ .divider {
+.textboxColor:not(.disabled) .input:focus ~ .divider,
+.textboxColor:not(.disabled) .hexColorSelector:hover ~ .divider,
+.textboxColor:not(.disabled) .hexColorSelector:focus ~ .divider {
   background-color: var(--figma-color-border);
 }
 
diff --git a/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx b/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx
index f0ce752e9..cb632468c 100644
--- a/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx
+++ b/packages/ui/src/components/textbox/textbox-color/textbox-color.tsx
@@ -2,9 +2,12 @@ import { MIXED_NUMBER, MIXED_STRING } from '@create-figma-plugin/utilities'
 import { h, JSX, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../../types/types.js'
+import { Event, EventHandler } from '../../../types/event-handler.js'
+import { RGBA } from '../../../types/RGBA.js'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../../utilities/get-current-from-ref.js'
+import { noop } from '../../../utilities/no-op.js'
 import { RawTextboxNumeric } from '../textbox-numeric/private/raw-textbox-numeric.js'
 import { createRgbaColor } from './private/create-rgba-color.js'
 import { normalizeUserInputColor } from './private/normalize-hex-color.js'
@@ -13,352 +16,362 @@ import styles from './textbox-color.module.css'
 
 const EMPTY_STRING = ''
 
-export type TextboxColorProps<
-  Name extends string,
-  HexColorName extends string,
-  OpacityName extends string
-> = {
+export type TextboxColorProps = {
+  blurOnEscapeKeyDown?: boolean
+  propagateEscapeKeyDown?: boolean
   disabled?: boolean
   hexColor: string
-  hexColorName?: HexColorName
+  hexColorName?: string
   hexColorPlaceholder?: string
-  name?: Name
-  onHexColorInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onHexColorValueInput?: OnValueChange<string, HexColorName>
-  onOpacityInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onOpacityNumericValueInput?: OnValueChange<null | number, OpacityName>
-  onOpacityValueInput?: OnValueChange<string, OpacityName>
-  onRgbaColorValueInput?: OnValueChange<null | RGBA, Name>
+  onHexColorInput?: EventHandler.onInput<HTMLInputElement>
+  onHexColorKeyDown?: EventHandler.onKeyDown<HTMLInputElement>
+  onHexColorValueInput?: EventHandler.onValueChange<string>
+  onOpacityInput?: EventHandler.onInput<HTMLInputElement>
+  onOpacityKeyDown?: EventHandler.onKeyDown<HTMLInputElement>
+  onOpacityNumericValueInput?: EventHandler.onValueChange<null | number>
+  onOpacityValueInput?: EventHandler.onValueChange<string>
+  onRgbaColorValueInput?: EventHandler.onValueChange<null | RGBA>
   opacity: string
-  opacityName?: OpacityName
+  opacityName?: string
   opacityPlaceholder?: string
-  propagateEscapeKeyDown?: boolean
   revertOnEscapeKeyDown?: boolean
   variant?: TextboxColorVariant
 }
 export type TextboxColorVariant = 'border' | 'underline'
 
-export function TextboxColor<
-  Name extends string,
-  HexColorName extends string,
-  OpacityName extends string
->({
-  disabled = false,
-  hexColor,
-  hexColorName,
-  hexColorPlaceholder,
-  name,
-  onHexColorInput = function () {},
-  onHexColorValueInput = function () {},
-  onOpacityInput = function () {},
-  onOpacityNumericValueInput = function () {},
-  onOpacityValueInput = function () {},
-  onRgbaColorValueInput = function () {},
-  opacity,
-  opacityName,
-  opacityPlaceholder,
-  propagateEscapeKeyDown = true,
-  revertOnEscapeKeyDown = false,
-  variant,
-  ...rest
-}: Props<
-  HTMLInputElement,
-  TextboxColorProps<Name, HexColorName, OpacityName>
->): JSX.Element {
-  const hexColorInputElementRef: RefObject<HTMLInputElement> = useRef(null)
-  const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
+export type TextboxColorRef = {
+  hexColorInputElement: HTMLInputElement
+  opacityInputElement: HTMLInputElement
+}
 
-  const [originalHexColor, setOriginalHexColor] = useState(EMPTY_STRING) // Value of the hex color textbox when it was initially focused
+export const TextboxColor = createComponent<HTMLDivElement, TextboxColorProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      disabled = false,
+      hexColor,
+      hexColorName,
+      hexColorPlaceholder,
+      onHexColorInput = noop,
+      onHexColorKeyDown = noop,
+      onHexColorValueInput = noop,
+      onOpacityInput = noop,
+      onOpacityKeyDown = noop,
+      onOpacityNumericValueInput = noop,
+      onOpacityValueInput = noop,
+      onRgbaColorValueInput = noop,
+      opacity,
+      opacityName,
+      opacityPlaceholder,
+      propagateEscapeKeyDown = true,
+      revertOnEscapeKeyDown = false,
+      variant,
+      ...rest
+    },
+    ref
+  ): JSX.Element {
+    const hexColorInputElementRef: RefObject<HTMLInputElement> = useRef(null)
+    const opacityInputElementRef: RefObject<HTMLInputElement> = useRef(null)
+    const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
 
-  const setHexColorInputElementValue = useCallback(function (
-    value: string
-  ): void {
-    const inputElement = getCurrentFromRef(hexColorInputElementRef)
-    inputElement.value = value
-    const inputEvent = document.createEvent('Event')
-    inputEvent.initEvent('input', true, true)
-    inputElement.dispatchEvent(inputEvent)
-  },
-  [])
+    const [originalHexColor, setOriginalHexColor] = useState(EMPTY_STRING) // Value of the hex color textbox when it was initially focused
 
-  const handleHexColorSelectorFocus = useCallback(function (
-    event: JSX.TargetedEvent<HTMLInputElement>
-  ): void {
-    const hexColor = event.currentTarget.value.slice(1).toUpperCase()
-    setOriginalHexColor(hexColor)
-  },
-  [])
+    const setHexColorInputElementValue = useCallback(function (
+      value: string
+    ): void {
+      const inputElement = getCurrentFromRef(hexColorInputElementRef)
+      inputElement.value = value
+      const inputEvent = new window.Event('input', {
+        bubbles: true,
+        cancelable: true
+      })
+      inputElement.dispatchEvent(inputEvent)
+    },
+    [])
 
-  const handleHexColorSelectorInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
+    const handleHexColorSelectorFocus = useCallback(function (
+      event: Event.onFocus<HTMLInputElement>
+    ): void {
       const hexColor = event.currentTarget.value.slice(1).toUpperCase()
-      setHexColorInputElementValue(hexColor)
+      setOriginalHexColor(hexColor)
     },
-    [setHexColorInputElementValue]
-  )
+    [])
 
-  const handleHexColorSelectorKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      if (event.key !== 'Escape') {
-        return
-      }
-      if (propagateEscapeKeyDown === false) {
-        event.stopPropagation()
-      }
-      if (revertOnEscapeKeyDown === true) {
-        setHexColorInputElementValue(originalHexColor)
-        setOriginalHexColor(EMPTY_STRING)
-      }
-      event.currentTarget.blur()
-    },
-    [
-      originalHexColor,
-      propagateEscapeKeyDown,
-      revertOnEscapeKeyDown,
-      setHexColorInputElementValue
-    ]
-  )
+    const handleHexColorSelectorInput = useCallback(
+      function (event: Event.onInput<HTMLInputElement>): void {
+        const hexColor = event.currentTarget.value.slice(1).toUpperCase()
+        setHexColorInputElementValue(hexColor)
+      },
+      [setHexColorInputElementValue]
+    )
 
-  const handleHexColorBlur = useCallback(
-    function (): void {
-      if (revertOnEscapeKeyDownRef.current === true) {
-        revertOnEscapeKeyDownRef.current = false
-        return
-      }
-      if (hexColor === EMPTY_STRING) {
-        if (originalHexColor !== EMPTY_STRING) {
+    const handleHexColorSelectorKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        if (event.key !== 'Escape') {
+          return
+        }
+        if (revertOnEscapeKeyDown === true) {
           setHexColorInputElementValue(originalHexColor)
+          setOriginalHexColor(EMPTY_STRING)
         }
-        setOriginalHexColor(EMPTY_STRING)
-        return
-      }
-      if (hexColor !== MIXED_STRING) {
-        const normalizedHexColor = normalizeUserInputColor(hexColor)
-        const newHexColor =
-          normalizedHexColor === null ? originalHexColor : normalizedHexColor
-        if (newHexColor !== hexColor) {
-          setHexColorInputElementValue(newHexColor)
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
         }
-      }
-      setOriginalHexColor(EMPTY_STRING)
-    },
-    [hexColor, originalHexColor, setHexColorInputElementValue]
-  )
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
+      },
+      [
+        blurOnEscapeKeyDown,
+        originalHexColor,
+        propagateEscapeKeyDown,
+        revertOnEscapeKeyDown,
+        setHexColorInputElementValue
+      ]
+    )
 
-  const handleHexColorFocus = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
-      setOriginalHexColor(hexColor)
-      event.currentTarget.select()
-    },
-    [hexColor]
-  )
+    const handleHexColorBlur = useCallback(
+      function (): void {
+        if (revertOnEscapeKeyDownRef.current === true) {
+          revertOnEscapeKeyDownRef.current = false
+          return
+        }
+        if (hexColor === EMPTY_STRING) {
+          if (originalHexColor !== EMPTY_STRING) {
+            setHexColorInputElementValue(originalHexColor)
+          }
+          setOriginalHexColor(EMPTY_STRING)
+          return
+        }
+        if (hexColor !== MIXED_STRING) {
+          const normalizedHexColor = normalizeUserInputColor(hexColor)
+          const newHexColor =
+            normalizedHexColor === null ? originalHexColor : normalizedHexColor
+          if (newHexColor !== hexColor) {
+            setHexColorInputElementValue(newHexColor)
+          }
+        }
+        setOriginalHexColor(EMPTY_STRING)
+      },
+      [hexColor, originalHexColor, setHexColorInputElementValue]
+    )
 
-  const handleHexColorInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>) {
-      onHexColorInput(event)
-      const newHexColor = event.currentTarget.value
-      onHexColorValueInput(newHexColor, hexColorName)
-      if (newHexColor === EMPTY_STRING) {
-        onRgbaColorValueInput(null, name)
-        return
-      }
-      const normalizedHexColor = normalizeUserInputColor(newHexColor)
-      if (normalizedHexColor === null) {
-        onRgbaColorValueInput(null, name)
-        return
-      }
-      const rgba = createRgbaColor(normalizedHexColor, opacity)
-      onRgbaColorValueInput(rgba, name)
-    },
-    [
-      hexColorName,
-      onHexColorInput,
-      onHexColorValueInput,
-      onRgbaColorValueInput,
-      name,
-      opacity
-    ]
-  )
+    const handleHexColorFocus = useCallback(
+      function (event: Event.onFocus<HTMLInputElement>): void {
+        setOriginalHexColor(hexColor)
+        event.currentTarget.select()
+      },
+      [hexColor]
+    )
 
-  const handleHexColorKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      const key = event.key
-      if (key === 'Escape') {
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
+    const handleHexColorInput = useCallback(
+      function (event: Event.onInput<HTMLInputElement>) {
+        onHexColorInput(event)
+        const newHexColor = event.currentTarget.value
+        onHexColorValueInput(newHexColor)
+        if (newHexColor === EMPTY_STRING) {
+          onRgbaColorValueInput(null)
+          return
         }
-        if (revertOnEscapeKeyDown === true) {
-          revertOnEscapeKeyDownRef.current = true
-          setHexColorInputElementValue(originalHexColor)
-          setOriginalHexColor(EMPTY_STRING)
+        const normalizedHexColor = normalizeUserInputColor(newHexColor)
+        if (normalizedHexColor === null) {
+          onRgbaColorValueInput(null)
+          return
+        }
+        const rgba = createRgbaColor(normalizedHexColor, opacity)
+        onRgbaColorValueInput(rgba)
+      },
+      [onHexColorInput, onHexColorValueInput, onRgbaColorValueInput, opacity]
+    )
+
+    const handleHexColorKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onHexColorKeyDown(event)
+        const key = event.key
+        if (key === 'Escape') {
+          if (revertOnEscapeKeyDown === true) {
+            revertOnEscapeKeyDownRef.current = true
+            setHexColorInputElementValue(originalHexColor)
+            setOriginalHexColor(EMPTY_STRING)
+          }
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
+          return
+        }
+        const element = event.currentTarget
+        if (key === 'ArrowDown' || key === 'ArrowUp') {
+          event.preventDefault()
+          const delta = event.shiftKey === true ? 10 : 1
+          const startingHexColor =
+            hexColor === EMPTY_STRING || hexColor === MIXED_STRING
+              ? key === 'ArrowDown'
+                ? 'FFFFFF'
+                : '000000'
+              : hexColor
+          const newHexColor = updateHexColor(
+            startingHexColor,
+            key === 'ArrowDown' ? -1 * delta : delta
+          )
+          setHexColorInputElementValue(newHexColor)
+          element.select()
+          return
+        }
+        if (event.ctrlKey === true || event.metaKey === true) {
+          return
+        }
+      },
+      [
+        blurOnEscapeKeyDown,
+        hexColor,
+        onHexColorKeyDown,
+        originalHexColor,
+        propagateEscapeKeyDown,
+        revertOnEscapeKeyDown,
+        setHexColorInputElementValue
+      ]
+    )
+
+    const handleHexColorMouseUp = useCallback(
+      function (event: Event.onMouseUp<HTMLInputElement>): void {
+        if (hexColor !== MIXED_STRING) {
+          return
         }
-        event.currentTarget.blur()
-        return
-      }
-      if (key === 'Enter') {
-        event.currentTarget.blur()
-        return
-      }
-      const element = event.currentTarget
-      if (key === 'ArrowDown' || key === 'ArrowUp') {
         event.preventDefault()
-        const delta = event.shiftKey === true ? 10 : 1
-        const startingHexColor =
-          hexColor === EMPTY_STRING || hexColor === MIXED_STRING
-            ? key === 'ArrowDown'
-              ? 'FFFFFF'
-              : '000000'
-            : hexColor
-        const newHexColor = updateHexColor(
-          startingHexColor,
-          key === 'ArrowDown' ? -1 * delta : delta
-        )
-        setHexColorInputElementValue(newHexColor)
-        element.select()
-        return
-      }
-      if (event.ctrlKey === true || event.metaKey === true) {
-        return
-      }
-    },
-    [
-      hexColor,
-      originalHexColor,
-      propagateEscapeKeyDown,
-      revertOnEscapeKeyDown,
-      setHexColorInputElementValue
-    ]
-  )
+      },
+      [hexColor]
+    )
 
-  const handleHexColorMouseUp = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
-      if (hexColor !== MIXED_STRING) {
-        return
-      }
-      event.preventDefault()
-    },
-    [hexColor]
-  )
+    const handleOpacityInput = useCallback(
+      function (event: Event.onInput<HTMLInputElement>) {
+        onOpacityInput(event)
+        const newOpacity = event.currentTarget.value
+        const rgba = createRgbaColor(hexColor, newOpacity)
+        onRgbaColorValueInput(rgba)
+      },
+      [hexColor, onOpacityInput, onRgbaColorValueInput]
+    )
 
-  const handleOpacityInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>) {
-      onOpacityInput(event)
-      const newOpacity = event.currentTarget.value
-      const rgba = createRgbaColor(hexColor, newOpacity)
-      onRgbaColorValueInput(rgba, name)
-    },
-    [hexColor, onOpacityInput, onRgbaColorValueInput, name]
-  )
+    const handleOpacityNumericValueInput = useCallback(
+      function (opacity: null | number) {
+        onOpacityNumericValueInput(
+          opacity === null || opacity === MIXED_NUMBER ? opacity : opacity / 100
+        )
+      },
+      [onOpacityNumericValueInput]
+    )
 
-  const handleOpacityNumericValueInput = useCallback(
-    function (opacity: null | number) {
-      onOpacityNumericValueInput(
-        opacity === null || opacity === MIXED_NUMBER ? opacity : opacity / 100
-      )
+    const validateOpacityOnBlur = useCallback(function (
+      opacity: null | number
+    ) {
+      return opacity !== null // Revert the original value if empty
     },
-    [onOpacityNumericValueInput]
-  )
-
-  const validateOpacityOnBlur = useCallback(function (opacity: null | number) {
-    return opacity !== null // Revert the original value if empty
-  }, [])
+    [])
 
-  const parsedOpacity = parseOpacity(opacity)
+    const parsedOpacity = parseOpacity(opacity)
 
-  const isHexColorValid = hexColor !== EMPTY_STRING && hexColor !== MIXED_STRING
-  const normalizedHexColor =
-    isHexColorValid === true ? normalizeUserInputColor(hexColor) : 'FFFFFF'
-  const renderedHexColor =
-    normalizedHexColor === null ? originalHexColor : normalizedHexColor
+    const isHexColorValid =
+      hexColor !== EMPTY_STRING && hexColor !== MIXED_STRING
+    const normalizedHexColor =
+      isHexColorValid === true ? normalizeUserInputColor(hexColor) : 'FFFFFF'
+    const renderedHexColor =
+      normalizedHexColor === null ? originalHexColor : normalizedHexColor
 
-  // Uncomment to debug
-  // console.table([{ hexColor, renderedHexColor, opacity, parsedOpacity }])
+    // Uncomment to debug
+    // console.table([{ hexColor, renderedHexColor, opacity, parsedOpacity }])
 
-  return (
-    <div
-      class={createClassName([
-        styles.textboxColor,
-        typeof variant === 'undefined'
-          ? null
-          : variant === 'border'
-          ? styles.hasBorder
-          : null,
-        disabled === true ? styles.disabled : null
-      ])}
-    >
-      <div class={styles.color}>
-        <div
-          class={styles.colorFill}
-          style={
-            isHexColorValid === true
-              ? { backgroundColor: `#${renderedHexColor}` }
-              : {}
-          }
-        ></div>
-        {parsedOpacity === 1 ? null : (
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        class={createClassName([
+          styles.textboxColor,
+          typeof variant === 'undefined'
+            ? null
+            : variant === 'border'
+            ? styles.hasBorder
+            : null,
+          disabled === true ? styles.disabled : null
+        ])}
+      >
+        <div class={styles.color}>
           <div
             class={styles.colorFill}
             style={
               isHexColorValid === true
-                ? {
-                    backgroundColor: `#${renderedHexColor}`,
-                    opacity: parsedOpacity
-                  }
+                ? { backgroundColor: `#${renderedHexColor}` }
                 : {}
             }
           ></div>
-        )}
-        <div class={styles.colorBorder} />
+          {parsedOpacity === 1 ? null : (
+            <div
+              class={styles.colorFill}
+              style={
+                isHexColorValid === true
+                  ? {
+                      backgroundColor: `#${renderedHexColor}`,
+                      opacity: parsedOpacity
+                    }
+                  : {}
+              }
+            ></div>
+          )}
+          <div class={styles.colorBorder} />
+        </div>
+        <input
+          class={styles.hexColorSelector}
+          disabled={disabled === true}
+          onFocus={handleHexColorSelectorFocus}
+          onInput={handleHexColorSelectorInput}
+          onKeyDown={handleHexColorSelectorKeyDown}
+          tabIndex={-1}
+          type="color"
+          value={`#${renderedHexColor}`}
+        />
+        <input
+          ref={hexColorInputElementRef}
+          class={createClassName([styles.input, styles.hexColorInput])}
+          disabled={disabled === true}
+          name={hexColorName}
+          onBlur={handleHexColorBlur}
+          onFocus={handleHexColorFocus}
+          onInput={handleHexColorInput}
+          onKeyDown={handleHexColorKeyDown}
+          onMouseUp={handleHexColorMouseUp}
+          placeholder={hexColorPlaceholder}
+          spellcheck={false}
+          tabIndex={0}
+          type="text"
+          value={hexColor === MIXED_STRING ? 'Mixed' : hexColor}
+        />
+        <RawTextboxNumeric
+          ref={opacityInputElementRef}
+          class={createClassName([styles.input, styles.opacityInput])}
+          disabled={disabled === true}
+          maximum={100}
+          minimum={0}
+          name={opacityName}
+          onInput={handleOpacityInput}
+          onKeyDown={onOpacityKeyDown}
+          onNumericValueInput={handleOpacityNumericValueInput}
+          onValueInput={onOpacityValueInput}
+          placeholder={opacityPlaceholder}
+          propagateEscapeKeyDown={propagateEscapeKeyDown}
+          revertOnEscapeKeyDown={revertOnEscapeKeyDown}
+          suffix="%"
+          validateOnBlur={validateOpacityOnBlur}
+          value={opacity}
+        />
+        <div class={styles.divider} />
+        <div class={styles.border} />
+        {variant === 'underline' ? <div class={styles.underline} /> : null}
       </div>
-      <input
-        class={styles.hexColorSelector}
-        disabled={disabled === true}
-        onFocus={handleHexColorSelectorFocus}
-        onInput={handleHexColorSelectorInput}
-        onKeyDown={handleHexColorSelectorKeyDown}
-        tabIndex={-1}
-        type="color"
-        value={`#${renderedHexColor}`}
-      />
-      <input
-        {...rest}
-        ref={hexColorInputElementRef}
-        class={createClassName([styles.input, styles.hexColorInput])}
-        disabled={disabled === true}
-        name={hexColorName}
-        onBlur={handleHexColorBlur}
-        onFocus={handleHexColorFocus}
-        onInput={handleHexColorInput}
-        onKeyDown={handleHexColorKeyDown}
-        onMouseUp={handleHexColorMouseUp}
-        placeholder={hexColorPlaceholder}
-        spellcheck={false}
-        tabIndex={disabled === true ? -1 : 0}
-        type="text"
-        value={hexColor === MIXED_STRING ? 'Mixed' : hexColor}
-      />
-      <RawTextboxNumeric
-        class={createClassName([styles.input, styles.opacityInput])}
-        disabled={disabled === true}
-        maximum={100}
-        minimum={0}
-        name={opacityName}
-        onInput={handleOpacityInput}
-        onNumericValueInput={handleOpacityNumericValueInput}
-        onValueInput={onOpacityValueInput}
-        placeholder={opacityPlaceholder}
-        propagateEscapeKeyDown={propagateEscapeKeyDown}
-        revertOnEscapeKeyDown={revertOnEscapeKeyDown}
-        suffix="%"
-        validateOnBlur={validateOpacityOnBlur}
-        value={opacity}
-      />
-      <div class={styles.divider} />
-      <div class={styles.border} />
-      {variant === 'underline' ? <div class={styles.underline} /> : null}
-    </div>
-  )
-}
+    )
+  }
+)
 
 function parseOpacity(opacity: string): number {
   if (opacity === MIXED_STRING || opacity === EMPTY_STRING) {
diff --git a/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-border.stories.tsx b/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-border.stories.tsx
index 026fa735f..fe86ac682 100644
--- a/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-border.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-border.stories.tsx
@@ -53,7 +53,7 @@ export const Placeholder = function () {
   return (
     <TextboxMultiline
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -71,7 +71,7 @@ export const PlaceholderFocused = function () {
     <TextboxMultiline
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
diff --git a/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-default.stories.tsx b/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-default.stories.tsx
index f602d2a56..1d20cd67b 100644
--- a/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-default.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-default.stories.tsx
@@ -50,7 +50,7 @@ export const Placeholder = function () {
   return (
     <TextboxMultiline
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
@@ -67,7 +67,7 @@ export const PlaceholderFocused = function () {
     <TextboxMultiline
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
diff --git a/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-underline.stories.tsx b/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-underline.stories.tsx
index df940f9d1..9c50e2741 100644
--- a/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-underline.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-multiline/stories/textbox-multiline-underline.stories.tsx
@@ -53,7 +53,7 @@ export const Placeholder = function () {
   return (
     <TextboxMultiline
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -71,7 +71,7 @@ export const PlaceholderFocused = function () {
     <TextboxMultiline
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
diff --git a/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx b/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx
index 27474d12a..f214e2fe2 100644
--- a/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx
+++ b/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.tsx
@@ -2,22 +2,24 @@ import { MIXED_STRING } from '@create-figma-plugin/utilities'
 import { h, JSX, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../../types/types.js'
+import { Event, EventHandler } from '../../../types/event-handler.js'
+import { FocusableComponentProps } from '../../../types/focusable-component-props.js'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../../utilities/get-current-from-ref.js'
+import { noop } from '../../../utilities/no-op.js'
 import { isKeyCodeCharacterGenerating } from '../private/is-keycode-character-generating.js'
 import styles from './textbox-multiline.module.css'
 
 const EMPTY_STRING = ''
 
-export type TextboxMultilineProps<Name extends string> = {
+export interface TextboxMultilineProps
+  extends FocusableComponentProps<HTMLTextAreaElement> {
   grow?: boolean
   disabled?: boolean
-  name?: Name
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLTextAreaElement>>
-  onValueInput?: OnValueChange<string, Name>
+  onInput?: EventHandler.onInput<HTMLTextAreaElement>
+  onValueInput?: (value: string) => void
   placeholder?: string
-  propagateEscapeKeyDown?: boolean
   revertOnEscapeKeyDown?: boolean
   rows?: number
   spellCheck?: boolean
@@ -28,22 +30,29 @@ export type TextboxMultilineProps<Name extends string> = {
 
 export type TextboxMultilineVariant = 'border' | 'underline'
 
-export function TextboxMultiline<Name extends string>({
-  grow = false,
-  disabled = false,
-  name,
-  onInput = function () {},
-  onValueInput = function () {},
-  placeholder,
-  propagateEscapeKeyDown = true,
-  revertOnEscapeKeyDown = false,
-  rows = 3,
-  spellCheck = false,
-  validateOnBlur,
-  variant,
-  value,
-  ...rest
-}: Props<HTMLTextAreaElement, TextboxMultilineProps<Name>>): JSX.Element {
+export const TextboxMultiline = createComponent<
+  HTMLTextAreaElement,
+  TextboxMultilineProps
+>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    grow = false,
+    disabled = false,
+    onInput = noop,
+    onKeyDown = noop,
+    onValueInput = noop,
+    placeholder,
+    propagateEscapeKeyDown = true,
+    revertOnEscapeKeyDown = false,
+    rows = 3,
+    spellCheck = false,
+    validateOnBlur,
+    variant,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   const textAreaElementRef: RefObject<HTMLTextAreaElement> = useRef(null)
   const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
 
@@ -52,8 +61,10 @@ export function TextboxMultiline<Name extends string>({
   const setTextAreaElementValue = useCallback(function (value: string): void {
     const textAreaElement = getCurrentFromRef(textAreaElementRef)
     textAreaElement.value = value
-    const inputEvent = document.createEvent('Event')
-    inputEvent.initEvent('input', true, true)
+    const inputEvent = new window.Event('input', {
+      bubbles: true,
+      cancelable: true
+    })
     textAreaElement.dispatchEvent(inputEvent)
   }, [])
 
@@ -86,7 +97,7 @@ export function TextboxMultiline<Name extends string>({
   )
 
   const handleFocus = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLTextAreaElement>): void {
+    function (event: Event.onFocus<HTMLTextAreaElement>): void {
       setOriginalValue(value)
       event.currentTarget.select()
     },
@@ -94,25 +105,28 @@ export function TextboxMultiline<Name extends string>({
   )
 
   const handleInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLTextAreaElement>): void {
-      onValueInput(event.currentTarget.value, name)
+    function (event: Event.onInput<HTMLTextAreaElement>): void {
+      onValueInput(event.currentTarget.value)
       onInput(event)
     },
-    [name, onInput, onValueInput]
+    [onInput, onValueInput]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLTextAreaElement>): void {
+    function (event: Event.onKeyDown<HTMLTextAreaElement>): void {
+      onKeyDown(event)
       if (event.key === 'Escape') {
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
         if (revertOnEscapeKeyDown === true) {
           revertOnEscapeKeyDownRef.current = true
           setTextAreaElementValue(originalValue)
           setOriginalValue(EMPTY_STRING)
         }
-        event.currentTarget.blur()
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
         return
       }
       if (
@@ -125,6 +139,8 @@ export function TextboxMultiline<Name extends string>({
       }
     },
     [
+      blurOnEscapeKeyDown,
+      onKeyDown,
       originalValue,
       propagateEscapeKeyDown,
       revertOnEscapeKeyDown,
@@ -134,7 +150,7 @@ export function TextboxMultiline<Name extends string>({
   )
 
   const handleMouseUp = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLTextAreaElement>): void {
+    function (event: Event.onMouseUp<HTMLTextAreaElement>): void {
       if (value === MIXED_STRING) {
         // Prevent changing the selection if `value` is `MIXED_STRING`
         event.preventDefault()
@@ -143,6 +159,21 @@ export function TextboxMultiline<Name extends string>({
     [value]
   )
 
+  const refCallback = useCallback(
+    function (textAreaElement: null | HTMLTextAreaElement) {
+      textAreaElementRef.current = textAreaElement
+      if (ref === null) {
+        return
+      }
+      if (typeof ref === 'function') {
+        ref(textAreaElement)
+        return
+      }
+      ref.current = textAreaElement
+    },
+    [ref, textAreaElementRef]
+  )
+
   return (
     <div
       class={createClassName([
@@ -163,10 +194,9 @@ export function TextboxMultiline<Name extends string>({
       ) : null}
       <textarea
         {...rest}
-        ref={textAreaElementRef}
+        ref={refCallback}
         class={styles.textarea}
         disabled={disabled === true}
-        name={name}
         onBlur={handleBlur}
         onFocus={handleFocus}
         onInput={handleInput}
@@ -175,11 +205,11 @@ export function TextboxMultiline<Name extends string>({
         placeholder={placeholder}
         rows={rows}
         spellcheck={spellCheck}
-        tabIndex={disabled === true ? -1 : 0}
+        tabIndex={0}
         value={value === MIXED_STRING ? 'Mixed' : value}
       />
       <div class={styles.border} />
       {variant === 'underline' ? <div class={styles.underline} /> : null}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx b/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx
index 2a6efbb89..64dd68a2b 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/private/raw-textbox-numeric.tsx
@@ -7,8 +7,11 @@ import {
 import { h, JSX, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../../../types/types.js'
+import { Event, EventHandler } from '../../../../types/event-handler.js'
+import { FocusableComponentProps } from '../../../../types/focusable-component-props.js'
+import { createComponent } from '../../../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../../../utilities/get-current-from-ref.js'
+import { noop } from '../../../../utilities/no-op.js'
 import { computeNextValue } from '../../private/compute-next-value.js'
 import { isKeyCodeCharacterGenerating } from '../../private/is-keycode-character-generating.js'
 import { formatEvaluatedValue } from './format-evaluated-value.js'
@@ -16,44 +19,50 @@ import { formatEvaluatedValue } from './format-evaluated-value.js'
 const FRACTION_DIGITS = 3
 const EMPTY_STRING = ''
 
-export type RawTextboxNumericProps<Name extends string> = {
+export interface RawTextboxNumericProps
+  extends FocusableComponentProps<HTMLInputElement> {
   disabled?: boolean
   incrementBig?: number
   incrementSmall?: number
   integer?: boolean
   maximum?: number
   minimum?: number
-  name?: Name
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onNumericValueInput?: OnValueChange<null | number, Name>
-  onValueInput?: OnValueChange<string, Name>
+  onInput?: EventHandler.onInput<HTMLInputElement>
+  onNumericValueInput?: EventHandler.onValueChange<null | number>
+  onValueInput?: EventHandler.onValueChange<string>
   placeholder?: string
-  propagateEscapeKeyDown?: boolean
   revertOnEscapeKeyDown?: boolean
   suffix?: string
   validateOnBlur?: (value: null | number) => null | number | boolean
   value: string
 }
 
-export function RawTextboxNumeric<Name extends string>({
-  disabled = false,
-  incrementBig = 10,
-  incrementSmall = 1,
-  integer = false,
-  maximum,
-  minimum,
-  name,
-  onInput = function () {},
-  onNumericValueInput = function () {},
-  onValueInput = function () {},
-  placeholder,
-  propagateEscapeKeyDown = true,
-  revertOnEscapeKeyDown = false,
-  suffix,
-  validateOnBlur,
-  value,
-  ...rest
-}: Props<HTMLInputElement, RawTextboxNumericProps<Name>>): JSX.Element {
+export const RawTextboxNumeric = createComponent<
+  HTMLInputElement,
+  RawTextboxNumericProps
+>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    disabled = false,
+    incrementBig = 10,
+    incrementSmall = 1,
+    integer = false,
+    maximum,
+    minimum,
+    onInput = noop,
+    onKeyDown = noop,
+    onNumericValueInput = noop,
+    onValueInput = noop,
+    placeholder,
+    propagateEscapeKeyDown = true,
+    revertOnEscapeKeyDown = false,
+    suffix,
+    validateOnBlur,
+    value,
+    ...rest
+  },
+  ref
+): JSX.Element {
   if (
     typeof minimum !== 'undefined' &&
     typeof maximum !== 'undefined' &&
@@ -70,8 +79,10 @@ export function RawTextboxNumeric<Name extends string>({
   const setInputElementValue = useCallback(function (value: string): void {
     const inputElement = getCurrentFromRef(inputElementRef)
     inputElement.value = value
-    const inputEvent = document.createEvent('Event')
-    inputEvent.initEvent('input', true, true)
+    const inputEvent = new window.Event('input', {
+      bubbles: true,
+      cancelable: true
+    })
     inputElement.dispatchEvent(inputEvent)
   }, [])
 
@@ -128,7 +139,7 @@ export function RawTextboxNumeric<Name extends string>({
   )
 
   const handleFocus = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
+    function (event: Event.onFocus<HTMLInputElement>): void {
       setOriginalValue(value)
       event.currentTarget.select()
     },
@@ -136,33 +147,32 @@ export function RawTextboxNumeric<Name extends string>({
   )
 
   const handleInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>) {
+    function (event: Event.onInput<HTMLInputElement>): void {
       onInput(event)
       const value = event.currentTarget.value
-      onValueInput(value, name)
+      onValueInput(value)
       const evaluatedValue = evaluateValue(value, suffix)
-      onNumericValueInput(evaluatedValue, name)
+      onNumericValueInput(evaluatedValue)
     },
-    [name, onInput, onNumericValueInput, onValueInput, suffix]
+    [onInput, onNumericValueInput, onValueInput, suffix]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       const key = event.key
       if (key === 'Escape') {
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
-        }
         if (revertOnEscapeKeyDown === true) {
           revertOnEscapeKeyDownRef.current = true
           setInputElementValue(originalValue)
           setOriginalValue(EMPTY_STRING)
         }
-        event.currentTarget.blur()
-        return
-      }
-      if (key === 'Enter') {
-        event.currentTarget.blur()
+        if (propagateEscapeKeyDown === false) {
+          event.stopPropagation()
+        }
+        if (blurOnEscapeKeyDown === true) {
+          event.currentTarget.blur()
+        }
         return
       }
       const element = event.currentTarget
@@ -251,12 +261,14 @@ export function RawTextboxNumeric<Name extends string>({
       }
     },
     [
+      blurOnEscapeKeyDown,
       handleInput,
       incrementBig,
       incrementSmall,
       integer,
       maximum,
       minimum,
+      onKeyDown,
       originalValue,
       propagateEscapeKeyDown,
       revertOnEscapeKeyDown,
@@ -267,7 +279,7 @@ export function RawTextboxNumeric<Name extends string>({
   )
 
   const handleMouseUp = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
+    function (event: Event.onMouseUp<HTMLInputElement>): void {
       if (value !== MIXED_STRING) {
         return
       }
@@ -277,7 +289,7 @@ export function RawTextboxNumeric<Name extends string>({
   )
 
   const handlePaste = useCallback(
-    function (event: JSX.TargetedClipboardEvent<HTMLInputElement>): void {
+    function (event: Event.onPaste<HTMLInputElement>): void {
       if (event.clipboardData === null) {
         throw new Error('`event.clipboardData` is `null`')
       }
@@ -299,12 +311,26 @@ export function RawTextboxNumeric<Name extends string>({
     [integer, suffix]
   )
 
+  const refCallback = useCallback(
+    function (inputElement: null | HTMLInputElement) {
+      inputElementRef.current = inputElement
+      if (ref === null) {
+        return
+      }
+      if (typeof ref === 'function') {
+        ref(inputElement)
+        return
+      }
+      ref.current = inputElement
+    },
+    [ref, inputElementRef]
+  )
+
   return (
     <input
       {...rest}
-      ref={inputElementRef}
+      ref={refCallback}
       disabled={disabled === true}
-      name={name}
       onBlur={handleBlur}
       onFocus={handleFocus}
       onInput={handleInput}
@@ -313,12 +339,12 @@ export function RawTextboxNumeric<Name extends string>({
       onPaste={handlePaste}
       placeholder={placeholder}
       spellcheck={false}
-      tabIndex={disabled === true ? -1 : 0}
+      tabIndex={0}
       type="text"
       value={value === MIXED_STRING ? 'Mixed' : value}
     />
   )
-}
+})
 
 function restrictValue(value: number, minimum?: number, maximum?: number) {
   if (typeof minimum !== 'undefined') {
diff --git a/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-border.stories.tsx b/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-border.stories.tsx
index 51c27b8a7..d6c63a89e 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-border.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-border.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
 import { IconLayerFrame16 } from '../../../../icons/icon-16/icon-layer-frame-16.js'
@@ -52,7 +52,7 @@ export const Placeholder = function () {
   return (
     <TextboxNumeric
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -70,7 +70,7 @@ export const PlaceholderFocused = function () {
     <TextboxNumeric
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -198,6 +198,23 @@ export const Mixed = function () {
   return <TextboxNumeric onInput={handleInput} value={value} variant="border" />
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [value, setValue] = useState<string>('42')
+  function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newValue = event.currentTarget.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <TextboxNumeric
+      blurOnEnterKeyDown={false}
+      onInput={handleInput}
+      value={value}
+      variant="border"
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [value, setValue] = useState<string>('42')
   function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
@@ -408,3 +425,25 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<HTMLInputElement> = useRef(null)
+  const [value, setValue] = useState<string>('42')
+  function handleInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current)
+    const newValue = ref.current.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <TextboxNumeric
+      ref={ref}
+      onInput={handleInput}
+      value={value}
+      variant="border"
+    />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-default.stories.tsx b/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-default.stories.tsx
index a7a5edc78..311628409 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-default.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-default.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
 import { IconLayerFrame16 } from '../../../../icons/icon-16/icon-layer-frame-16.js'
@@ -51,7 +51,7 @@ export const Placeholder = function () {
   return (
     <TextboxNumeric
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
@@ -68,7 +68,7 @@ export const PlaceholderFocused = function () {
     <TextboxNumeric
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
@@ -172,6 +172,22 @@ export const Mixed = function () {
   return <TextboxNumeric onInput={handleInput} value={value} />
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [value, setValue] = useState<string>('42')
+  function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newValue = event.currentTarget.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <TextboxNumeric
+      blurOnEnterKeyDown={false}
+      onInput={handleInput}
+      value={value}
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [value, setValue] = useState<string>('42')
   function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
@@ -355,3 +371,18 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<HTMLInputElement> = useRef(null)
+  const [value, setValue] = useState<string>('42')
+  function handleInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current)
+    const newValue = ref.current.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return <TextboxNumeric ref={ref} onInput={handleInput} value={value} />
+}
diff --git a/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-underline.stories.tsx b/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-underline.stories.tsx
index f4b93251c..80685c532 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-underline.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/stories/textbox-numeric-underline.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
 import { IconLayerFrame16 } from '../../../../icons/icon-16/icon-layer-frame-16.js'
@@ -54,7 +54,7 @@ export const Placeholder = function () {
   return (
     <TextboxNumeric
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -72,7 +72,7 @@ export const PlaceholderFocused = function () {
     <TextboxNumeric
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -204,6 +204,23 @@ export const Mixed = function () {
   )
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [value, setValue] = useState<string>('42')
+  function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newValue = event.currentTarget.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <TextboxNumeric
+      blurOnEnterKeyDown={false}
+      onInput={handleInput}
+      value={value}
+      variant="underline"
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [value, setValue] = useState<string>('42')
   function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
@@ -414,3 +431,25 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<HTMLInputElement> = useRef(null)
+  const [value, setValue] = useState<string>('42')
+  function handleInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current)
+    const newValue = ref.current.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <TextboxNumeric
+      ref={ref}
+      onInput={handleInput}
+      value={value}
+      variant="underline"
+    />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx b/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx
index 3274e4fe7..52f860531 100644
--- a/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx
+++ b/packages/ui/src/components/textbox/textbox-numeric/textbox-numeric.tsx
@@ -1,7 +1,7 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../../types/types.js'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
 import textboxStyles from '../textbox/textbox.module.css'
 import {
   RawTextboxNumeric,
@@ -9,19 +9,17 @@ import {
 } from './private/raw-textbox-numeric.js'
 import textboxNumericStyles from './textbox-numeric.module.css'
 
-export type TextboxNumericProps<Name extends string> =
-  RawTextboxNumericProps<Name> & {
-    icon?: ComponentChildren
-    variant?: TextboxNumericVariant
-  }
+export type TextboxNumericProps = RawTextboxNumericProps & {
+  icon?: ComponentChildren
+  variant?: TextboxNumericVariant
+}
 
 export type TextboxNumericVariant = 'border' | 'underline'
 
-export function TextboxNumeric<Name extends string>({
-  icon,
-  variant,
-  ...rest
-}: Props<HTMLInputElement, TextboxNumericProps<Name>>): JSX.Element {
+export const TextboxNumeric = createComponent<
+  HTMLInputElement,
+  TextboxNumericProps
+>(function ({ icon, variant, ...rest }, ref): JSX.Element {
   if (typeof icon === 'string' && icon.length !== 1) {
     throw new Error(`String \`icon\` must be a single character: ${icon}`)
   }
@@ -41,6 +39,7 @@ export function TextboxNumeric<Name extends string>({
     >
       <RawTextboxNumeric
         {...rest}
+        ref={ref}
         class={createClassName([
           textboxStyles.input,
           textboxNumericStyles.input
@@ -53,4 +52,4 @@ export function TextboxNumeric<Name extends string>({
       {variant === 'underline' ? <div class={textboxStyles.underline} /> : null}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx b/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
index 4871d2fd4..dce8cb5ec 100644
--- a/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
+++ b/packages/ui/src/components/textbox/textbox/private/raw-textbox.tsx
@@ -2,173 +2,197 @@ import { MIXED_STRING } from '@create-figma-plugin/utilities'
 import { h, JSX, RefObject } from 'preact'
 import { useCallback, useRef, useState } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../../../types/types.js'
+import { Event, EventHandler } from '../../../../types/event-handler.js'
+import { FocusableComponentProps } from '../../../../types/focusable-component-props.js'
+import { createComponent } from '../../../../utilities/create-component.js'
 import { getCurrentFromRef } from '../../../../utilities/get-current-from-ref.js'
+import { noop } from '../../../../utilities/no-op.js'
 import { isKeyCodeCharacterGenerating } from '../../private/is-keycode-character-generating.js'
 
 const EMPTY_STRING = ''
 
-export type RawTextboxProps<Name extends string> = {
+export interface RawTextboxProps
+  extends FocusableComponentProps<HTMLInputElement> {
   disabled?: boolean
-  name?: Name
-  onBlur?: OmitThisParameter<JSX.FocusEventHandler<HTMLInputElement>>
-  onFocus?: OmitThisParameter<JSX.FocusEventHandler<HTMLInputElement>>
-  onKeyDown?: OmitThisParameter<JSX.KeyboardEventHandler<HTMLInputElement>>
-  onMouseUp?: OmitThisParameter<JSX.MouseEventHandler<HTMLInputElement>>
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueInput?: OnValueChange<string, Name>
+  onBlur?: EventHandler.onBlur<HTMLInputElement>
+  onFocus?: EventHandler.onFocus<HTMLInputElement>
+  onKeyDown?: EventHandler.onKeyDown<HTMLInputElement>
+  onMouseUp?: EventHandler.onMouseUp<HTMLInputElement>
+  onInput?: EventHandler.onInput<HTMLInputElement>
+  onValueInput?: (value: string) => void
   password?: boolean
   placeholder?: string
-  propagateEscapeKeyDown?: boolean
   revertOnEscapeKeyDown?: boolean
   spellCheck?: boolean
   validateOnBlur?: (value: string) => string | boolean
   value: string
 }
 
-export function RawTextbox<Name extends string>({
-  disabled = false,
-  name,
-  onBlur = function () {},
-  onFocus = function () {},
-  onInput = function () {},
-  onKeyDown = function () {},
-  onMouseUp = function () {},
-  onValueInput = function () {},
-  password = false,
-  placeholder,
-  propagateEscapeKeyDown = true,
-  revertOnEscapeKeyDown = false,
-  spellCheck = false,
-  validateOnBlur,
-  value,
-  ...rest
-}: Props<HTMLInputElement, RawTextboxProps<Name>>): JSX.Element {
-  const inputElementRef: RefObject<HTMLInputElement> = useRef(null)
-  const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
+export const RawTextbox = createComponent<HTMLInputElement, RawTextboxProps>(
+  function (
+    {
+      blurOnEscapeKeyDown = true,
+      disabled = false,
+      onBlur = noop,
+      onFocus = noop,
+      onInput = noop,
+      onKeyDown = noop,
+      onMouseUp = noop,
+      onValueInput = noop,
+      password = false,
+      placeholder,
+      propagateEscapeKeyDown = true,
+      revertOnEscapeKeyDown = false,
+      spellCheck = false,
+      validateOnBlur,
+      value,
+      ...rest
+    },
+    ref
+  ): JSX.Element {
+    const inputElementRef: RefObject<HTMLInputElement> = useRef(null)
+    const revertOnEscapeKeyDownRef: RefObject<boolean> = useRef(false) // Boolean flag to exit early from `handleBlur`
 
-  const [originalValue, setOriginalValue] = useState(EMPTY_STRING) // Value of the textbox when it was initially focused
+    const [originalValue, setOriginalValue] = useState(EMPTY_STRING) // Value of the textbox when it was initially focused
 
-  const setInputElementValue = useCallback(function (value: string): void {
-    const inputElement = getCurrentFromRef(inputElementRef)
-    inputElement.value = value
-    const inputEvent = document.createEvent('Event')
-    inputEvent.initEvent('input', true, true)
-    inputElement.dispatchEvent(inputEvent)
-  }, [])
+    const setInputElementValue = useCallback(function (value: string): void {
+      const inputElement = getCurrentFromRef(inputElementRef)
+      inputElement.value = value
+      const inputEvent = new window.Event('input', {
+        bubbles: true,
+        cancelable: true
+      })
+      inputElement.dispatchEvent(inputEvent)
+    }, [])
 
-  const handleBlur = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
-      if (revertOnEscapeKeyDownRef.current === true) {
-        revertOnEscapeKeyDownRef.current = false
-        return
-      }
-      onBlur(event)
-      if (typeof validateOnBlur !== 'undefined') {
-        const result = validateOnBlur(value)
-        if (typeof result === 'string') {
-          // Set to the value returned by `validateOnBlur`
-          setInputElementValue(result)
-          setOriginalValue(EMPTY_STRING)
+    const handleBlur = useCallback(
+      function (event: Event.onBlur<HTMLInputElement>): void {
+        if (revertOnEscapeKeyDownRef.current === true) {
+          revertOnEscapeKeyDownRef.current = false
           return
         }
-        if (result === false) {
-          // Revert the original value
-          if (value !== originalValue) {
-            setInputElementValue(originalValue)
+        if (typeof validateOnBlur !== 'undefined') {
+          const result = validateOnBlur(value)
+          if (typeof result === 'string') {
+            // Set to the value returned by `validateOnBlur`
+            setInputElementValue(result)
+            setOriginalValue(EMPTY_STRING)
+            onBlur(event)
+            return
+          }
+          if (result === false) {
+            // Revert the original value
+            if (value !== originalValue) {
+              setInputElementValue(originalValue)
+            }
+            setOriginalValue(EMPTY_STRING)
+            onBlur(event)
+            return
           }
-          setOriginalValue(EMPTY_STRING)
-          return
         }
-      }
-      setOriginalValue(EMPTY_STRING)
-    },
-    [onBlur, originalValue, setInputElementValue, validateOnBlur, value]
-  )
+        setOriginalValue(EMPTY_STRING)
+        onBlur(event)
+      },
+      [onBlur, originalValue, setInputElementValue, validateOnBlur, value]
+    )
 
-  const handleFocus = useCallback(
-    function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
-      onFocus(event)
-      setOriginalValue(value)
-      event.currentTarget.select()
-    },
-    [onFocus, value]
-  )
+    const handleFocus = useCallback(
+      function (event: Event.onFocus<HTMLInputElement>): void {
+        onFocus(event)
+        setOriginalValue(value)
+        event.currentTarget.select()
+      },
+      [onFocus, value]
+    )
 
-  const handleInput = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      onValueInput(event.currentTarget.value, name)
-      onInput(event)
-    },
-    [name, onInput, onValueInput]
-  )
+    const handleInput = useCallback(
+      function (event: Event.onInput<HTMLInputElement>): void {
+        onInput(event)
+        onValueInput(event.currentTarget.value)
+      },
+      [onInput, onValueInput]
+    )
 
-  const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      onKeyDown(event)
-      const key = event.key
-      if (key === 'Escape') {
-        if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
+    const handleKeyDown = useCallback(
+      function (event: Event.onKeyDown<HTMLInputElement>): void {
+        onKeyDown(event)
+        const key = event.key
+        if (key === 'Escape') {
+          if (revertOnEscapeKeyDown === true) {
+            revertOnEscapeKeyDownRef.current = true
+            setInputElementValue(originalValue)
+            setOriginalValue(EMPTY_STRING)
+          }
+          if (propagateEscapeKeyDown === false) {
+            event.stopPropagation()
+          }
+          if (blurOnEscapeKeyDown === true) {
+            event.currentTarget.blur()
+          }
+          return
         }
-        if (revertOnEscapeKeyDown === true) {
-          revertOnEscapeKeyDownRef.current = true
-          setInputElementValue(originalValue)
-          setOriginalValue(EMPTY_STRING)
+        if (
+          value === MIXED_STRING &&
+          isKeyCodeCharacterGenerating(event.keyCode) === false
+        ) {
+          // Prevent changing the cursor position with the keyboard if `value` is `MIXED_STRING`
+          event.preventDefault()
+          event.currentTarget.select()
         }
-        event.currentTarget.blur()
-        return
-      }
-      if (key === 'Enter') {
-        event.currentTarget.blur()
-        return
-      }
-      if (
-        value === MIXED_STRING &&
-        isKeyCodeCharacterGenerating(event.keyCode) === false
-      ) {
-        // Prevent changing the cursor position with the keyboard if `value` is `MIXED_STRING`
-        event.preventDefault()
-        event.currentTarget.select()
-      }
-    },
-    [
-      onKeyDown,
-      originalValue,
-      propagateEscapeKeyDown,
-      revertOnEscapeKeyDown,
-      setInputElementValue,
-      value
-    ]
-  )
+      },
+      [
+        blurOnEscapeKeyDown,
+        onKeyDown,
+        originalValue,
+        propagateEscapeKeyDown,
+        revertOnEscapeKeyDown,
+        setInputElementValue,
+        value
+      ]
+    )
 
-  const handleMouseUp = useCallback(
-    function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
-      onMouseUp(event)
-      if (value === MIXED_STRING) {
-        // Prevent changing the selection if `value` is `MIXED_STRING`
-        event.preventDefault()
-      }
-    },
-    [onMouseUp, value]
-  )
+    const handleMouseUp = useCallback(
+      function (event: Event.onMouseUp<HTMLInputElement>): void {
+        onMouseUp(event)
+        if (value === MIXED_STRING) {
+          // Prevent changing the selection if `value` is `MIXED_STRING`
+          event.preventDefault()
+        }
+      },
+      [onMouseUp, value]
+    )
 
-  return (
-    <input
-      {...rest}
-      ref={inputElementRef}
-      disabled={disabled === true}
-      name={name}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      onInput={handleInput}
-      onKeyDown={handleKeyDown}
-      onMouseUp={handleMouseUp}
-      placeholder={placeholder}
-      spellcheck={spellCheck}
-      tabIndex={disabled === true ? -1 : 0}
-      type={password === true ? 'password' : 'text'}
-      value={value === MIXED_STRING ? 'Mixed' : value}
-    />
-  )
-}
+    const refCallback = useCallback(
+      function (inputElement: null | HTMLInputElement) {
+        inputElementRef.current = inputElement
+        if (ref === null) {
+          return
+        }
+        if (typeof ref === 'function') {
+          ref(inputElement)
+          return
+        }
+        ref.current = inputElement
+      },
+      [ref, inputElementRef]
+    )
+
+    return (
+      <input
+        {...rest}
+        ref={refCallback}
+        disabled={disabled === true}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        onMouseUp={handleMouseUp}
+        placeholder={placeholder}
+        spellcheck={spellCheck}
+        tabIndex={0}
+        type={password === true ? 'password' : 'text'}
+        value={value === MIXED_STRING ? 'Mixed' : value}
+      />
+    )
+  }
+)
diff --git a/packages/ui/src/components/textbox/textbox/stories/textbox-border.stories.tsx b/packages/ui/src/components/textbox/textbox/stories/textbox-border.stories.tsx
index 8a89a4133..125046036 100644
--- a/packages/ui/src/components/textbox/textbox/stories/textbox-border.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox/stories/textbox-border.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
 import { IconLayerFrame16 } from '../../../../icons/icon-16/icon-layer-frame-16.js'
@@ -52,7 +52,7 @@ export const Placeholder = function () {
   return (
     <Textbox
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -70,7 +70,7 @@ export const PlaceholderFocused = function () {
     <Textbox
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="border"
     />
@@ -187,6 +187,23 @@ export const Mixed = function () {
   return <Textbox onInput={handleInput} value={value} variant="border" />
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [value, setValue] = useState<string>('Text')
+  function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newValue = event.currentTarget.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <Textbox
+      blurOnEnterKeyDown={false}
+      onInput={handleInput}
+      value={value}
+      variant="border"
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [value, setValue] = useState<string>('Text')
   function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
@@ -245,3 +262,20 @@ export const OnValueInput = function () {
     <Textbox onValueInput={handleValueInput} value={value} variant="border" />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<HTMLInputElement> = useRef(null)
+  const [value, setValue] = useState<string>('Text')
+  function handleInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current)
+    const newValue = ref.current.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <Textbox ref={ref} onInput={handleInput} value={value} variant="border" />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox/stories/textbox-default.stories.tsx b/packages/ui/src/components/textbox/textbox/stories/textbox-default.stories.tsx
index 1af9bcf89..1f8010d7f 100644
--- a/packages/ui/src/components/textbox/textbox/stories/textbox-default.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox/stories/textbox-default.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
 import { IconLayerFrame16 } from '../../../../icons/icon-16/icon-layer-frame-16.js'
@@ -43,7 +43,7 @@ export const Placeholder = function () {
     setValue(newValue)
   }
   return (
-    <Textbox onInput={handleInput} placeholder="placeholder" value={value} />
+    <Textbox onInput={handleInput} placeholder="Placeholder" value={value} />
   )
 }
 
@@ -58,7 +58,7 @@ export const PlaceholderFocused = function () {
     <Textbox
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
     />
   )
@@ -150,6 +150,18 @@ export const Mixed = function () {
   return <Textbox onInput={handleInput} value={value} />
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [value, setValue] = useState<string>('Text')
+  function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newValue = event.currentTarget.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <Textbox blurOnEnterKeyDown={false} onInput={handleInput} value={value} />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [value, setValue] = useState<string>('Text')
   function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
@@ -197,3 +209,18 @@ export const OnValueInput = function () {
   }
   return <Textbox onValueInput={handleValueInput} value={value} />
 }
+
+export const Ref = function () {
+  const ref: RefObject<HTMLInputElement> = useRef(null)
+  const [value, setValue] = useState<string>('Text')
+  function handleInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current)
+    const newValue = ref.current.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return <Textbox ref={ref} onInput={handleInput} value={value} />
+}
diff --git a/packages/ui/src/components/textbox/textbox/stories/textbox-underline.stories.tsx b/packages/ui/src/components/textbox/textbox/stories/textbox-underline.stories.tsx
index 89f217be9..14b3657d5 100644
--- a/packages/ui/src/components/textbox/textbox/stories/textbox-underline.stories.tsx
+++ b/packages/ui/src/components/textbox/textbox/stories/textbox-underline.stories.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { MIXED_STRING } from '@create-figma-plugin/utilities'
-import { h, JSX } from 'preact'
-import { useState } from 'preact/hooks'
+import { h, JSX, RefObject } from 'preact'
+import { useRef, useState } from 'preact/hooks'
 
 import { useInitialFocus } from '../../../../hooks/use-initial-focus/use-initial-focus.js'
 import { IconLayerFrame16 } from '../../../../icons/icon-16/icon-layer-frame-16.js'
@@ -52,7 +52,7 @@ export const Placeholder = function () {
   return (
     <Textbox
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -70,7 +70,7 @@ export const PlaceholderFocused = function () {
     <Textbox
       {...useInitialFocus()}
       onInput={handleInput}
-      placeholder="placeholder"
+      placeholder="Placeholder"
       value={value}
       variant="underline"
     />
@@ -187,6 +187,23 @@ export const Mixed = function () {
   return <Textbox onInput={handleInput} value={value} variant="underline" />
 }
 
+export const BlurOnEnterKeyDown = function () {
+  const [value, setValue] = useState<string>('Text')
+  function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
+    const newValue = event.currentTarget.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <Textbox
+      blurOnEnterKeyDown={false}
+      onInput={handleInput}
+      value={value}
+      variant="underline"
+    />
+  )
+}
+
 export const RevertOnEscapeKeyDown = function () {
   const [value, setValue] = useState<string>('Text')
   function handleInput(event: JSX.TargetedEvent<HTMLInputElement>) {
@@ -249,3 +266,25 @@ export const OnValueInput = function () {
     />
   )
 }
+
+export const Ref = function () {
+  const ref: RefObject<HTMLInputElement> = useRef(null)
+  const [value, setValue] = useState<string>('Text')
+  function handleInput() {
+    if (ref.current === null) {
+      throw new Error('`ref.current` is `null`')
+    }
+    console.log(ref.current)
+    const newValue = ref.current.value
+    console.log(newValue)
+    setValue(newValue)
+  }
+  return (
+    <Textbox
+      ref={ref}
+      onInput={handleInput}
+      value={value}
+      variant="underline"
+    />
+  )
+}
diff --git a/packages/ui/src/components/textbox/textbox/textbox.tsx b/packages/ui/src/components/textbox/textbox/textbox.tsx
index 68b402c14..c7067aa90 100644
--- a/packages/ui/src/components/textbox/textbox/textbox.tsx
+++ b/packages/ui/src/components/textbox/textbox/textbox.tsx
@@ -1,45 +1,39 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../../types/types.js'
 import { createClassName } from '../../../utilities/create-class-name.js'
+import { createComponent } from '../../../utilities/create-component.js'
 import { RawTextbox, RawTextboxProps } from './private/raw-textbox.js'
 import styles from './textbox.module.css'
 
-export type TextboxProps<Name extends string> = RawTextboxProps<Name> & {
+export type TextboxProps = RawTextboxProps & {
   icon?: ComponentChildren
   variant?: TextboxVariant
 }
 
 export type TextboxVariant = 'border' | 'underline'
 
-export function Textbox<Name extends string>({
-  icon,
-  variant,
-  ...rest
-}: Props<HTMLInputElement, TextboxProps<Name>>): JSX.Element {
-  if (typeof icon === 'string' && icon.length !== 1) {
-    throw new Error(`String \`icon\` must be a single character: ${icon}`)
-  }
+export const Textbox = createComponent<HTMLInputElement, TextboxProps>(
+  function ({ icon, variant, ...rest }, ref): JSX.Element {
+    if (typeof icon === 'string' && icon.length !== 1) {
+      throw new Error(`String \`icon\` must be a single character: ${icon}`)
+    }
 
-  return (
-    <div
-      class={createClassName([
-        styles.textbox,
-        typeof variant === 'undefined'
-          ? null
-          : variant === 'border'
-          ? styles.hasBorder
-          : null,
-        typeof icon === 'undefined' ? null : styles.hasIcon,
-        rest.disabled === true ? styles.disabled : null
-      ])}
-    >
-      <RawTextbox {...rest} class={styles.input} />
-      {typeof icon === 'undefined' ? null : (
-        <div class={styles.icon}>{icon}</div>
-      )}
-      <div class={styles.border} />
-      {variant === 'underline' ? <div class={styles.underline} /> : null}
-    </div>
-  )
-}
+    return (
+      <div
+        class={createClassName([
+          styles.textbox,
+          variant === 'border' ? styles.hasBorder : null,
+          typeof icon === 'undefined' ? null : styles.hasIcon,
+          rest.disabled === true ? styles.disabled : null
+        ])}
+      >
+        <RawTextbox {...rest} ref={ref} class={styles.input} />
+        {typeof icon === 'undefined' ? null : (
+          <div class={styles.icon}>{icon}</div>
+        )}
+        <div class={styles.border} />
+        {variant === 'underline' ? <div class={styles.underline} /> : null}
+      </div>
+    )
+  }
+)
diff --git a/packages/ui/src/components/toggle/toggle.tsx b/packages/ui/src/components/toggle/toggle.tsx
index 0936be3bc..2487374c1 100644
--- a/packages/ui/src/components/toggle/toggle.tsx
+++ b/packages/ui/src/components/toggle/toggle.tsx
@@ -1,50 +1,55 @@
 import { ComponentChildren, h, JSX } from 'preact'
 import { useCallback } from 'preact/hooks'
 
-import { OnValueChange, Props } from '../../types/types.js'
+import { Event, EventHandler } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './toggle.module.css'
 
-export type ToggleProps<Name extends string> = {
+export interface ToggleProps extends FocusableComponentProps<HTMLInputElement> {
   children: ComponentChildren
   disabled?: boolean
-  name?: Name
-  onChange?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueChange?: OnValueChange<boolean, Name>
-  propagateEscapeKeyDown?: boolean
+  onChange?: EventHandler.onChange<HTMLInputElement>
+  onValueChange?: EventHandler.onValueChange<boolean>
   value: boolean
 }
 
-export function Toggle<Name extends string>({
+export const Toggle = createComponent<HTMLInputElement, ToggleProps>(function ({
+  blurOnEscapeKeyDown = true,
   children,
   disabled = false,
-  name,
-  onChange = function () {},
-  onValueChange = function () {},
+  onChange = noop,
+  onKeyDown = noop,
+  onValueChange = noop,
   propagateEscapeKeyDown = true,
   value = false,
   ...rest
-}: Props<HTMLInputElement, ToggleProps<Name>>): JSX.Element {
+}): JSX.Element {
   const handleChange = useCallback(
-    function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const newValue = event.currentTarget.checked
-      onValueChange(newValue, name)
+    function (event: Event.onChange<HTMLInputElement>): void {
       onChange(event)
+      const newValue = event.currentTarget.checked
+      onValueChange(newValue)
     },
-    [name, onChange, onValueChange]
+    [onChange, onValueChange]
   )
 
   const handleKeyDown = useCallback(
-    function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
+    function (event: Event.onKeyDown<HTMLInputElement>): void {
+      onKeyDown(event)
       if (event.key !== 'Escape') {
         return
       }
       if (propagateEscapeKeyDown === false) {
         event.stopPropagation()
       }
-      event.currentTarget.blur()
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
     },
-    [propagateEscapeKeyDown]
+    [blurOnEscapeKeyDown, propagateEscapeKeyDown, onKeyDown]
   )
 
   return (
@@ -59,10 +64,9 @@ export function Toggle<Name extends string>({
         checked={value === true}
         class={styles.input}
         disabled={disabled === true}
-        name={name}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
-        tabIndex={disabled === true ? -1 : 0}
+        tabIndex={0}
         type="checkbox"
       />
       <div class={styles.box} />
@@ -70,4 +74,4 @@ export function Toggle<Name extends string>({
       <div class={styles.children}>{children}</div>
     </label>
   )
-}
+})
diff --git a/packages/ui/src/css/base.css b/packages/ui/src/css/base.css
index b4950b949..0b6e1d78d 100644
--- a/packages/ui/src/css/base.css
+++ b/packages/ui/src/css/base.css
@@ -1,15 +1,12 @@
 :root {
-  /* border-radius */
   --border-radius-2: 2px;
   --border-radius-6: 6px;
-  /* box-shadow */
   --box-shadow: var(--box-shadow-menu);
   --box-shadow-menu: 0 5px 17px rgba(0, 0, 0, 0.2),
     0 2px 7px rgba(0, 0, 0, 0.15), inset 0 0 0 0.5px #000000,
     0 0 0 0.5px rgba(0, 0, 0, 0.1);
   --box-shadow-modal: 0 2px 14px rgba(0, 0, 0, 0.15),
     0 0 0 0.5px rgba(0, 0, 0, 0.2);
-  /* font */
   --font-family: 'Inter', 'Helvetica', sans-serif;
   --font-family-code: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
     'Courier New', monospace;
@@ -18,15 +15,12 @@
   --font-weight-regular: 400;
   --font-weight-bold: 600;
   --line-height-16: 16px;
-  /* opacity */
   --opacity-30: 0.3;
-  /* space */
   --space-extra-small: 8px;
   --space-small: 12px;
   --space-medium: 16px;
   --space-large: 20px;
   --space-extra-large: 24px;
-  /* z-index */
   --z-index-1: 1;
   --z-index-2: 2;
 }
diff --git a/packages/ui/src/css/theme.css b/packages/ui/src/css/theme.css
index 408f7f2d2..83f91d399 100644
--- a/packages/ui/src/css/theme.css
+++ b/packages/ui/src/css/theme.css
@@ -1,3 +1,5 @@
+/* From https://figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens */
+
 :root .figma-light {
   --figma-color-bg: rgba(255, 255, 255, 1);
   --figma-color-bg-brand: #0d99ff;
diff --git a/packages/ui/src/hooks/use-form/stories/use-form.stories.tsx b/packages/ui/src/hooks/use-form/stories/use-form.stories.tsx
index c16bea5d7..0be68c22c 100644
--- a/packages/ui/src/hooks/use-form/stories/use-form.stories.tsx
+++ b/packages/ui/src/hooks/use-form/stories/use-form.stories.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import { Fragment, h } from 'preact'
+import { useCallback } from 'preact/hooks'
 
 import { Button } from '../../../components/button/button.js'
 import { Text } from '../../../components/text/text.js'
@@ -35,12 +36,17 @@ export const UseForm = function () {
         }
       }
     )
+  const handleValueInput = useCallback(
+    function (text: string) {
+      setFormState(text, 'text')
+    },
+    [setFormState]
+  )
   return (
     <Fragment>
       <Textbox
         {...initialFocus}
-        name="text"
-        onValueInput={setFormState}
+        onValueInput={handleValueInput}
         value={formState.text}
         variant="border"
       />
diff --git a/packages/ui/src/icons/create-icon.tsx b/packages/ui/src/icons/create-icon.tsx
index 9f4effd62..767444b94 100644
--- a/packages/ui/src/icons/create-icon.tsx
+++ b/packages/ui/src/icons/create-icon.tsx
@@ -1,7 +1,7 @@
 import { h, JSX } from 'preact'
 
 import { IconColor } from '../types/colors.js'
-import { Props } from '../types/types.js'
+import { createComponent } from '../utilities/create-component.js'
 import styles from './icon.module.css'
 
 export type IconProps = {
@@ -11,29 +11,28 @@ export type IconProps = {
 export function createIcon(
   path: string,
   options: { width: number; height: number }
-): (props: Props<SVGSVGElement, IconProps>) => JSX.Element {
+) {
   const { width, height } = options
-  return function Icon({
+  return createComponent<SVGSVGElement, IconProps>(function ({
     color,
     ...rest
-  }: Props<SVGSVGElement, IconProps>): JSX.Element {
+  }): JSX.Element {
     return (
       <svg
         {...rest}
         class={styles.icon}
         height={height}
-        style={
-          typeof color === 'undefined'
-            ? undefined
-            : {
-                fill: `var(--figma-color-icon-${color})`
-              }
-        }
+        style={{
+          fill:
+            typeof color === 'undefined'
+              ? 'currentColor'
+              : `var(--figma-color-icon-${color})`
+        }}
         width={width}
         xmlns="http://www.w3.org/2000/svg"
       >
         <path clip-rule="evenodd" d={path} fill-rule="evenodd" />
       </svg>
     )
-  }
+  })
 }
diff --git a/packages/ui/src/inline-text/bold/bold.tsx b/packages/ui/src/inline-text/bold/bold.tsx
index 2b5ff7786..382ea4cfa 100644
--- a/packages/ui/src/inline-text/bold/bold.tsx
+++ b/packages/ui/src/inline-text/bold/bold.tsx
@@ -1,19 +1,19 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './bold.module.css'
 
 export type BoldProps = {
   children: ComponentChildren
 }
 
-export function Bold({
-  children,
-  ...rest
-}: Props<HTMLSpanElement, BoldProps>): JSX.Element {
+export const Bold = createComponent<HTMLSpanElement, BoldProps>(function (
+  { children, ...rest },
+  ref
+): JSX.Element {
   return (
-    <strong {...rest} class={styles.bold}>
+    <strong {...rest} ref={ref} class={styles.bold}>
       {children}
     </strong>
   )
-}
+})
diff --git a/packages/ui/src/inline-text/code/code.tsx b/packages/ui/src/inline-text/code/code.tsx
index 8287a3d53..bce29fe9f 100644
--- a/packages/ui/src/inline-text/code/code.tsx
+++ b/packages/ui/src/inline-text/code/code.tsx
@@ -1,19 +1,19 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './code.module.css'
 
 export type CodeProps = {
   children: ComponentChildren
 }
 
-export function Code({
-  children,
-  ...rest
-}: Props<HTMLSpanElement, CodeProps>): JSX.Element {
+export const Code = createComponent<HTMLSpanElement, CodeProps>(function (
+  { children, ...rest },
+  ref
+): JSX.Element {
   return (
-    <code {...rest} class={styles.code}>
+    <code {...rest} ref={ref} class={styles.code}>
       {children}
     </code>
   )
-}
+})
diff --git a/packages/ui/src/inline-text/link/link.tsx b/packages/ui/src/inline-text/link/link.tsx
index 257069990..1a2f6b6be 100644
--- a/packages/ui/src/inline-text/link/link.tsx
+++ b/packages/ui/src/inline-text/link/link.tsx
@@ -1,34 +1,63 @@
 import { ComponentChildren, h, JSX } from 'preact'
+import { useCallback } from 'preact/hooks'
 
-import { Props } from '../../types/types.js'
+import { Event } from '../../types/event-handler.js'
+import { FocusableComponentProps } from '../../types/focusable-component-props.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
+import { noop } from '../../utilities/no-op.js'
 import styles from './link.module.css'
 
-export type LinkProps = {
+export interface LinkProps extends FocusableComponentProps<HTMLAnchorElement> {
   children: ComponentChildren
   fullWidth?: boolean
   href: string
   target?: string
 }
 
-export function Link({
-  children,
-  fullWidth = false,
-  href,
-  target,
-  ...rest
-}: Props<HTMLAnchorElement, LinkProps>): JSX.Element {
+export const Link = createComponent<HTMLAnchorElement, LinkProps>(function (
+  {
+    blurOnEscapeKeyDown = true,
+    children,
+    fullWidth = false,
+    href,
+    onKeyDown = noop,
+    propagateEscapeKeyDown = true,
+    target,
+    ...rest
+  },
+  ref
+): JSX.Element {
+  const handleKeyDown = useCallback(
+    function (event: Event.onKeyDown<HTMLAnchorElement>): void {
+      onKeyDown(event)
+      if (event.key !== 'Escape') {
+        return
+      }
+      if (propagateEscapeKeyDown === false) {
+        event.stopPropagation()
+      }
+      if (blurOnEscapeKeyDown === true) {
+        event.currentTarget.blur()
+      }
+    },
+    [blurOnEscapeKeyDown, propagateEscapeKeyDown, onKeyDown]
+  )
+
   return (
     <a
       {...rest}
+      ref={ref}
       class={createClassName([
         styles.link,
         fullWidth === true ? styles.fullWidth : null
       ])}
       href={href}
-      target={typeof target === 'undefined' ? undefined : target}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      target={target}
     >
       {children}
     </a>
   )
-}
+})
diff --git a/packages/ui/src/inline-text/muted/muted.tsx b/packages/ui/src/inline-text/muted/muted.tsx
index afc850feb..7bd2a92c9 100644
--- a/packages/ui/src/inline-text/muted/muted.tsx
+++ b/packages/ui/src/inline-text/muted/muted.tsx
@@ -1,19 +1,19 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './muted.module.css'
 
 export type MutedProps = {
   children: ComponentChildren
 }
 
-export function Muted({
-  children,
-  ...rest
-}: Props<HTMLSpanElement, MutedProps>): JSX.Element {
+export const Muted = createComponent<HTMLSpanElement, MutedProps>(function (
+  { children, ...rest },
+  ref
+): JSX.Element {
   return (
-    <span {...rest} class={styles.muted}>
+    <span {...rest} ref={ref} class={styles.muted}>
       {children}
     </span>
   )
-}
+})
diff --git a/packages/ui/src/layout/columns/columns.tsx b/packages/ui/src/layout/columns/columns.tsx
index 26280001c..2252d2753 100644
--- a/packages/ui/src/layout/columns/columns.tsx
+++ b/packages/ui/src/layout/columns/columns.tsx
@@ -1,28 +1,24 @@
 import { ComponentChild, h, JSX, toChildArray } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { Space } from '../../types/space.js'
 import { createClassName } from '../../utilities/create-class-name.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './columns.module.css'
 
 export type ColumnsProps = {
   children: ComponentChild
   space?: ColumnsSpace
 }
-export type ColumnsSpace =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'extraLarge'
+export type ColumnsSpace = Space
 
-export function Columns({
-  children,
-  space,
-  ...rest
-}: Props<HTMLDivElement, ColumnsProps>): JSX.Element {
+export const Columns = createComponent<HTMLDivElement, ColumnsProps>(function (
+  { children, space, ...rest },
+  ref
+): JSX.Element {
   return (
     <div
       {...rest}
+      ref={ref}
       class={createClassName([
         styles.columns,
         typeof space === 'undefined' ? null : styles[space]
@@ -40,4 +36,4 @@ export function Columns({
       })}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/layout/container/container.tsx b/packages/ui/src/layout/container/container.tsx
index 99b8d039a..d11954b4a 100644
--- a/packages/ui/src/layout/container/container.tsx
+++ b/packages/ui/src/layout/container/container.tsx
@@ -1,22 +1,17 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { Space } from '../../types/space.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './container.module.css'
 
 export type ContainerProps = {
   children: ComponentChildren
   space: ContainerSpace
 }
-export type ContainerSpace =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'extraLarge'
+export type ContainerSpace = Space
 
-export function Container({
-  space,
-  ...rest
-}: Props<HTMLDivElement, ContainerProps>): JSX.Element {
-  return <div {...rest} class={styles[space]} />
-}
+export const Container = createComponent<HTMLDivElement, ContainerProps>(
+  function ({ space, ...rest }, ref): JSX.Element {
+    return <div {...rest} ref={ref} class={styles[space]} />
+  }
+)
diff --git a/packages/ui/src/layout/inline/inline.tsx b/packages/ui/src/layout/inline/inline.tsx
index c1faf5ab6..80669f0cb 100644
--- a/packages/ui/src/layout/inline/inline.tsx
+++ b/packages/ui/src/layout/inline/inline.tsx
@@ -1,27 +1,23 @@
 import { ComponentChild, ComponentChildren, h, JSX, toChildArray } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { Space } from '../../types/space.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './inline.module.css'
 
 export type InlineProps = {
   children: ComponentChildren
   space?: InlineSpace
 }
-export type InlineSpace =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'extraLarge'
+export type InlineSpace = Space
 
-export function Inline({
-  children,
-  space,
-  ...rest
-}: Props<HTMLDivElement, InlineProps>): JSX.Element {
+export const Inline = createComponent<HTMLDivElement, InlineProps>(function (
+  { children, space, ...rest },
+  ref
+): JSX.Element {
   return (
     <div
       {...rest}
+      ref={ref}
       class={typeof space === 'undefined' ? undefined : styles[space]}
     >
       {toChildArray(children).map(function (
@@ -36,4 +32,4 @@ export function Inline({
       })}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/layout/middle-align/middle-align.tsx b/packages/ui/src/layout/middle-align/middle-align.tsx
index 99d876610..407721efa 100644
--- a/packages/ui/src/layout/middle-align/middle-align.tsx
+++ b/packages/ui/src/layout/middle-align/middle-align.tsx
@@ -1,19 +1,18 @@
 import { ComponentChildren, h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './middle-align.module.css'
 
 export type MiddleAlignProps = {
   children: ComponentChildren
 }
 
-export function MiddleAlign({
-  children,
-  ...rest
-}: Props<HTMLDivElement, MiddleAlignProps>): JSX.Element {
-  return (
-    <div {...rest} class={styles.middleAlign}>
-      <div class={styles.children}>{children}</div>
-    </div>
-  )
-}
+export const MiddleAlign = createComponent<HTMLDivElement, MiddleAlignProps>(
+  function ({ children, ...rest }, ref): JSX.Element {
+    return (
+      <div {...rest} ref={ref} class={styles.middleAlign}>
+        <div class={styles.children}>{children}</div>
+      </div>
+    )
+  }
+)
diff --git a/packages/ui/src/layout/stack/stack.tsx b/packages/ui/src/layout/stack/stack.tsx
index 794d1ccb8..cbb82971c 100644
--- a/packages/ui/src/layout/stack/stack.tsx
+++ b/packages/ui/src/layout/stack/stack.tsx
@@ -1,26 +1,21 @@
 import { ComponentChild, ComponentChildren, h, JSX, toChildArray } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { Space } from '../../types/space.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './stack.module.css'
 
 export type StackProps = {
   children: ComponentChildren
   space: StackSpace
 }
-export type StackSpace =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'extraLarge'
+export type StackSpace = Space
 
-export function Stack({
-  children,
-  space,
-  ...rest
-}: Props<HTMLDivElement, StackProps>): JSX.Element {
+export const Stack = createComponent<HTMLDivElement, StackProps>(function (
+  { children, space, ...rest },
+  ref
+): JSX.Element {
   return (
-    <div {...rest} class={styles[space]}>
+    <div {...rest} ref={ref} class={styles[space]}>
       {toChildArray(children).map(function (
         element: ComponentChild,
         index: number
@@ -33,4 +28,4 @@ export function Stack({
       })}
     </div>
   )
-}
+})
diff --git a/packages/ui/src/layout/vertical-space/vertical-space.tsx b/packages/ui/src/layout/vertical-space/vertical-space.tsx
index 8a07dfed2..fc6e890cd 100644
--- a/packages/ui/src/layout/vertical-space/vertical-space.tsx
+++ b/packages/ui/src/layout/vertical-space/vertical-space.tsx
@@ -1,21 +1,17 @@
 import { h, JSX } from 'preact'
 
-import { Props } from '../../types/types.js'
+import { Space } from '../../types/space.js'
+import { createComponent } from '../../utilities/create-component.js'
 import styles from './vertical-space.module.css'
 
 export type VerticalSpaceProps = {
   space: VerticalSpaceSpace
 }
-export type VerticalSpaceSpace =
-  | 'extraSmall'
-  | 'small'
-  | 'medium'
-  | 'large'
-  | 'extraLarge'
+export type VerticalSpaceSpace = Space
 
-export function VerticalSpace({
-  space,
-  ...rest
-}: Props<HTMLDivElement, VerticalSpaceProps>): JSX.Element {
-  return <div {...rest} class={styles[space]} />
-}
+export const VerticalSpace = createComponent<
+  HTMLDivElement,
+  VerticalSpaceProps
+>(function ({ space, ...rest }, ref): JSX.Element {
+  return <div {...rest} ref={ref} class={styles[space]} />
+})
diff --git a/packages/ui/src/types/colors.ts b/packages/ui/src/types/colors.ts
index a3cf87112..c3897297e 100644
--- a/packages/ui/src/types/colors.ts
+++ b/packages/ui/src/types/colors.ts
@@ -1,3 +1,5 @@
+// From https://figma.com/plugin-docs/css-variables/#list-of-all-available-color-tokens
+
 export type BackgroundColor =
   | 'brand'
   | 'brand-hover'
diff --git a/packages/ui/src/types/event-handler.ts b/packages/ui/src/types/event-handler.ts
new file mode 100644
index 000000000..a622c8bd8
--- /dev/null
+++ b/packages/ui/src/types/event-handler.ts
@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+
+import { JSXInternal } from 'preact/src/jsx'
+
+type First<T extends never[]> = T[0]
+
+type FirstArgument<EventHandler extends ((...args: any) => any) | undefined> =
+  First<Parameters<NonNullable<EventHandler>>>
+
+export namespace EventHandler {
+  export type onBlur<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onBlur']
+  export type onChange<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onChange']
+  export type onClick<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onClick']
+  export type onDragEnd<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onDragEnd']
+  export type onDragEnter<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onDragEnter']
+  export type onDragOver<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onDragOver']
+  export type onDrop<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onDrop']
+  export type onFocus<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onFocus']
+  export type onInput<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onInput']
+  export type onKeyDown<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onKeyDown']
+  export type onMouseDown<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onMouseDown']
+  export type onMouseMove<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onMouseMove']
+  export type onMouseUp<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onMouseUp']
+  export type onPaste<Target extends EventTarget> =
+    JSXInternal.DOMAttributes<Target>['onPaste']
+  export type onSelectedFiles = (files: Array<File>) => void
+  export type onValueChange<Value> = (value: Value) => void
+}
+
+export namespace Event {
+  export type onBlur<Target extends EventTarget> = FirstArgument<
+    EventHandler.onBlur<Target>
+  >
+  export type onChange<Target extends EventTarget> = FirstArgument<
+    EventHandler.onChange<Target>
+  >
+  export type onClick<Target extends EventTarget> = FirstArgument<
+    EventHandler.onClick<Target>
+  >
+  export type onDragEnd<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDragEnd<Target>
+  >
+  export type onDragEnter<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDragEnter<Target>
+  >
+  export type onDragOver<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDragOver<Target>
+  >
+  export type onDrop<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDrop<Target>
+  >
+  export type onFocus<Target extends EventTarget> = FirstArgument<
+    EventHandler.onFocus<Target>
+  >
+  export type onInput<Target extends EventTarget> = FirstArgument<
+    EventHandler.onInput<Target>
+  >
+  export type onKeyDown<Target extends EventTarget> = FirstArgument<
+    EventHandler.onKeyDown<Target>
+  >
+  export type onMouseDown<Target extends EventTarget> = FirstArgument<
+    EventHandler.onMouseDown<Target>
+  >
+  export type onMouseMove<Target extends EventTarget> = FirstArgument<
+    EventHandler.onMouseMove<Target>
+  >
+  export type onMouseUp<Target extends EventTarget> = FirstArgument<
+    EventHandler.onMouseUp<Target>
+  >
+  export type onPaste<Target extends EventTarget> = FirstArgument<
+    EventHandler.onPaste<Target>
+  >
+}
+
+export namespace EE {
+  export type onBlur<Target extends EventTarget> = FirstArgument<
+    EventHandler.onBlur<Target>
+  >
+  export type onChange<Target extends EventTarget> = FirstArgument<
+    EventHandler.onChange<Target>
+  >
+  export type onClick<Target extends EventTarget> = FirstArgument<
+    EventHandler.onClick<Target>
+  >
+  export type onDragEnd<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDragEnd<Target>
+  >
+  export type onDragEnter<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDragEnter<Target>
+  >
+  export type onDragOver<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDragOver<Target>
+  >
+  export type onDrop<Target extends EventTarget> = FirstArgument<
+    EventHandler.onDrop<Target>
+  >
+  export type onFocus<Target extends EventTarget> = FirstArgument<
+    EventHandler.onFocus<Target>
+  >
+  export type onInput<Target extends EventTarget> = FirstArgument<
+    EventHandler.onInput<Target>
+  >
+  export type onKeyDown<Target extends EventTarget> = FirstArgument<
+    EventHandler.onKeyDown<Target>
+  >
+  export type onMouseDown<Target extends EventTarget> = FirstArgument<
+    EventHandler.onMouseDown<Target>
+  >
+  export type onMouseMove<Target extends EventTarget> = FirstArgument<
+    EventHandler.onMouseMove<Target>
+  >
+  export type onMouseUp<Target extends EventTarget> = FirstArgument<
+    EventHandler.onMouseUp<Target>
+  >
+  export type onPaste<Target extends EventTarget> = FirstArgument<
+    EventHandler.onPaste<Target>
+  >
+}
diff --git a/packages/ui/src/types/focusable-component-props.ts b/packages/ui/src/types/focusable-component-props.ts
new file mode 100644
index 000000000..707a6e153
--- /dev/null
+++ b/packages/ui/src/types/focusable-component-props.ts
@@ -0,0 +1,7 @@
+import { EventHandler } from './event-handler.js'
+
+export interface FocusableComponentProps<Target extends EventTarget> {
+  blurOnEscapeKeyDown?: boolean
+  onKeyDown?: EventHandler.onKeyDown<Target>
+  propagateEscapeKeyDown?: boolean
+}
diff --git a/packages/ui/src/types/rgba.ts b/packages/ui/src/types/rgba.ts
new file mode 100644
index 000000000..fa6e258bf
--- /dev/null
+++ b/packages/ui/src/types/rgba.ts
@@ -0,0 +1,6 @@
+export type RGBA = {
+  r: number
+  g: number
+  b: number
+  a: number
+}
diff --git a/packages/ui/src/types/space.ts b/packages/ui/src/types/space.ts
new file mode 100644
index 000000000..82f885a97
--- /dev/null
+++ b/packages/ui/src/types/space.ts
@@ -0,0 +1 @@
+export type Space = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge'
diff --git a/packages/ui/src/types/types.ts b/packages/ui/src/types/types.ts
deleted file mode 100644
index bd6a082bb..000000000
--- a/packages/ui/src/types/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { JSX, RenderableProps } from 'preact'
-
-export type OnValueChange<Value, Name extends string> = (
-  newValue: Value,
-  name?: Name
-) => void
-
-export type Props<
-  Target extends EventTarget = EventTarget,
-  ComponentProps = Record<string, never>
-> = RenderableProps<
-  Omit<JSX.HTMLAttributes<Target>, keyof ComponentProps> & ComponentProps
->
diff --git a/packages/ui/src/utilities/create-component.ts b/packages/ui/src/utilities/create-component.ts
new file mode 100644
index 000000000..68256f7d6
--- /dev/null
+++ b/packages/ui/src/utilities/create-component.ts
@@ -0,0 +1,19 @@
+import { FunctionalComponent, JSX, Ref, RenderableProps } from 'preact'
+import { ForwardFn, forwardRef } from 'preact/compat'
+
+export type MixinHTMLElementAttributes<
+  Target extends EventTarget,
+  ComponentProps = Record<string, never>
+> = RenderableProps<
+  Omit<JSX.HTMLAttributes<Target>, keyof ComponentProps> & ComponentProps
+>
+
+export function createComponent<
+  Target extends EventTarget,
+  ComponentProps,
+  Props = MixinHTMLElementAttributes<Target, ComponentProps>
+>(
+  fn: ForwardFn<Props, Target>
+): FunctionalComponent<Omit<Props, 'ref'> & { ref?: Ref<Target> }> {
+  return forwardRef<Target, Props>(fn)
+}
diff --git a/packages/ui/src/utilities/no-op.ts b/packages/ui/src/utilities/no-op.ts
new file mode 100644
index 000000000..177804c7a
--- /dev/null
+++ b/packages/ui/src/utilities/no-op.ts
@@ -0,0 +1 @@
+export function noop() {}