From 3dd16180b0b58fc5b1ef8de52b77c84cc09a7e3f Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 15 Jul 2026 14:21:04 +0100
Subject: [PATCH 1/3] feat: align style

---
 packages/ui/.storybook/main.ts                |  6 ++-
 .../ui/src/components/base/StyledInput.vue    | 46 +++++++++++++++----
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index ede6261144..7653a7b799 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -1,4 +1,4 @@
-import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import type { StorybookConfig } from '@storybook/vue3-vite'
 import { mergeConfig } from 'vite'
@@ -16,7 +16,9 @@ const config: StorybookConfig = {
 		mergeConfig(config, {
 			resolve: {
 				alias: {
-					'@modrinth/api-client': path.resolve(__dirname, '../../api-client/src/index.ts'),
+					'@modrinth/api-client': fileURLToPath(
+						new URL('../../api-client/src/index.ts', import.meta.url),
+					),
 				},
 			},
 		}),
diff --git a/packages/ui/src/components/base/StyledInput.vue b/packages/ui/src/components/base/StyledInput.vue
index 74f1fa3950..6853edf393 100644
--- a/packages/ui/src/components/base/StyledInput.vue
+++ b/packages/ui/src/components/base/StyledInput.vue
@@ -34,11 +34,13 @@
 			:spellcheck="spellcheck"
 			:maxlength="maxlength"
 			:rows="rows"
-			class="w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow bg-surface-4 border-none rounded-xl"
+			class="w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow border border-solid rounded-xl"
 			:class="[
 				inputClass,
 				'pl-3 pr-3 py-2 text-base',
-				error ? 'outline outline-2 outline-red bg-warning-bg' : 'outline-none',
+				error
+					? 'outline-none border-red bg-highlight-red'
+					: 'outline-none border-surface-5 bg-surface-4',
 				disabled ? 'cursor-not-allowed' : '',
 				resizeClass,
 			]"
@@ -72,24 +74,35 @@
 			:class="[
 				inputClass,
 				variant === 'filled' && icon ? 'pl-10' : 'pl-3',
-				clearable && model && variant === 'filled' ? 'pr-8' : 'pr-3',
+				showClearButton || isDateInput ? 'pr-10' : 'pr-3',
+				isDateInput ? '[&::-webkit-calendar-picker-indicator]:opacity-0' : '',
 				size === 'small' ? 'h-8 py-1.5 text-sm' : 'h-9 py-2 text-base',
-				error ? 'outline outline-2 outline-red bg-warning-bg' : 'outline-none',
+				'outline-none',
 				disabled ? 'cursor-not-allowed' : '',
+				error ? 'bg-highlight-red' : variant === 'outlined' ? 'bg-transparent' : 'bg-surface-4',
+				error ? 'border-red' : variant === 'outlined' ? 'border-button-bg' : 'border-surface-5',
 				variant === 'outlined'
-					? 'bg-transparent border border-solid border-button-bg rounded-l-xl border-r-0'
-					: 'bg-surface-4 border-none rounded-xl',
+					? 'border border-solid rounded-l-xl border-r-0'
+					: 'border border-solid rounded-xl',
 			]"
 			@input="onInput"
 			@focus="isFocused = true"
 			@blur="isFocused = false"
 		/>
 
+		<CalendarIcon
+			v-if="isDateInput && !showClearButton"
+			class="pointer-events-none absolute right-3 top-1/2 z-[1] h-5 w-5 -translate-y-1/2 transition-colors"
+			:class="[isFocused ? 'opacity-100 text-contrast' : 'opacity-60 text-secondary']"
+			aria-hidden="true"
+		/>
+
 		<!-- Clear button (right side, filled variant, single-line only) -->
 		<button
-			v-if="!multiline && clearable && model && !disabled && !readonly && variant === 'filled'"
+			v-if="showClearButton"
 			type="button"
-			class="absolute right-0.5 z-[1] p-2 touch-manipulation bg-transparent border-none text-secondary hover:text-contrast transition-colors cursor-pointer select-none"
+			class="absolute right-0.5 top-1/2 z-[1] flex h-full w-10 -translate-y-1/2 touch-manipulation items-center justify-center border-none bg-transparent p-0 transition-colors cursor-pointer select-none hover:opacity-100 hover:text-contrast"
+			:class="[isFocused ? 'opacity-100 text-contrast' : 'opacity-60 text-secondary']"
 			aria-label="Clear input"
 			@click="clear"
 		>
@@ -100,7 +113,8 @@
 		<button
 			v-if="!multiline && variant === 'outlined'"
 			type="button"
-			class="flex touch-manipulation items-center justify-center px-2 bg-transparent border border-solid border-button-bg rounded-r-xl text-secondary hover:text-contrast transition-colors shrink-0"
+			class="flex touch-manipulation items-center justify-center px-2 bg-transparent border border-solid rounded-r-xl text-secondary hover:text-contrast transition-colors shrink-0"
+			:class="error ? 'border-red' : 'border-button-bg'"
 			:aria-label="clearable && model ? 'Clear input' : 'Search'"
 			:tabindex="clearable && model ? undefined : -1"
 			@click="clearable && model ? clear() : undefined"
@@ -116,7 +130,7 @@
 </template>
 
 <script setup lang="ts">
-import { SearchIcon, XIcon } from '@modrinth/assets'
+import { CalendarIcon, SearchIcon, XIcon } from '@modrinth/assets'
 import { type Component, computed, ref } from 'vue'
 
 const model = defineModel<string | number | undefined>()
@@ -170,6 +184,18 @@ const emit = defineEmits<{
 
 const inputRef = ref<HTMLInputElement | HTMLTextAreaElement>()
 const isFocused = ref(false)
+const isDateInput = computed(
+	() => !props.multiline && (props.type === 'date' || props.type === 'datetime-local'),
+)
+const showClearButton = computed(
+	() =>
+		!props.multiline &&
+		props.clearable &&
+		Boolean(model.value) &&
+		!props.disabled &&
+		!props.readonly &&
+		props.variant === 'filled',
+)
 const resizeClass = computed(
 	() => ({ none: 'resize-none', vertical: 'resize-y', both: 'resize' })[props.resize ?? 'none'],
 )

From 1186a8a027ed883af72ecd99961c9e8b1e616da4 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 15 Jul 2026 14:45:57 +0100
Subject: [PATCH 2/3] feat: new input components

---
 .../ui/src/components/base/StyledInput.vue    | 219 ------------------
 packages/ui/src/components/base/index.ts      |  11 +-
 .../base/{ => inputs}/DatePicker.vue          |  60 ++---
 .../base/inputs/InputClearButton.vue          |  30 +++
 .../src/components/base/inputs/InputFrame.vue |  59 +++++
 .../base/inputs/NativeDateInput.vue           | 146 ++++++++++++
 .../components/base/inputs/StyledInput.vue    | 154 ++++++++++++
 .../components/base/inputs/StyledTextarea.vue | 111 +++++++++
 .../ui/src/components/base/inputs/index.ts    |   7 +
 .../ui/src/components/base/inputs/types.ts    |   2 +
 10 files changed, 552 insertions(+), 247 deletions(-)
 delete mode 100644 packages/ui/src/components/base/StyledInput.vue
 rename packages/ui/src/components/base/{ => inputs}/DatePicker.vue (97%)
 create mode 100644 packages/ui/src/components/base/inputs/InputClearButton.vue
 create mode 100644 packages/ui/src/components/base/inputs/InputFrame.vue
 create mode 100644 packages/ui/src/components/base/inputs/NativeDateInput.vue
 create mode 100644 packages/ui/src/components/base/inputs/StyledInput.vue
 create mode 100644 packages/ui/src/components/base/inputs/StyledTextarea.vue
 create mode 100644 packages/ui/src/components/base/inputs/index.ts
 create mode 100644 packages/ui/src/components/base/inputs/types.ts

diff --git a/packages/ui/src/components/base/StyledInput.vue b/packages/ui/src/components/base/StyledInput.vue
deleted file mode 100644
index 6853edf393..0000000000
--- a/packages/ui/src/components/base/StyledInput.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-	<div
-		class="relative"
-		:class="[
-			wrapperClass,
-			multiline ? 'flex' : 'inline-flex',
-			{ 'opacity-50 cursor-not-allowed': disabled },
-			!multiline && variant === 'outlined' ? 'items-stretch' : 'items-center',
-		]"
-	>
-		<!-- Left icon (filled variant, single-line only) -->
-		<component
-			:is="icon"
-			v-if="icon && variant === 'filled' && !multiline"
-			class="absolute left-3 h-5 w-5 z-[1] pointer-events-none transition-colors"
-			:class="[isFocused ? 'opacity-100 text-contrast' : 'opacity-60 text-secondary']"
-			aria-hidden="true"
-		/>
-
-		<!-- Multiline textarea -->
-		<textarea
-			v-if="multiline"
-			:id="id"
-			v-bind="inputAttrs"
-			ref="inputRef"
-			:value="model"
-			:placeholder="placeholder"
-			:disabled="disabled"
-			:readonly="readonly"
-			:name="name"
-			:autocomplete="autocomplete"
-			:autocorrect="autocorrect"
-			:autocapitalize="autocapitalize"
-			:spellcheck="spellcheck"
-			:maxlength="maxlength"
-			:rows="rows"
-			class="w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow border border-solid rounded-xl"
-			:class="[
-				inputClass,
-				'pl-3 pr-3 py-2 text-base',
-				error
-					? 'outline-none border-red bg-highlight-red'
-					: 'outline-none border-surface-5 bg-surface-4',
-				disabled ? 'cursor-not-allowed' : '',
-				resizeClass,
-			]"
-			@input="onInput"
-			@focus="isFocused = true"
-			@blur="isFocused = false"
-		/>
-
-		<!-- Single-line input -->
-		<input
-			v-else
-			:id="id"
-			v-bind="inputAttrs"
-			ref="inputRef"
-			:type="type"
-			:value="model"
-			:placeholder="placeholder"
-			:disabled="disabled"
-			:readonly="readonly"
-			:name="name"
-			:autocomplete="autocomplete"
-			:autocorrect="autocorrect"
-			:autocapitalize="autocapitalize"
-			:spellcheck="spellcheck"
-			:inputmode="inputmode"
-			:maxlength="maxlength"
-			:min="min"
-			:max="max"
-			:step="step"
-			class="w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow"
-			:class="[
-				inputClass,
-				variant === 'filled' && icon ? 'pl-10' : 'pl-3',
-				showClearButton || isDateInput ? 'pr-10' : 'pr-3',
-				isDateInput ? '[&::-webkit-calendar-picker-indicator]:opacity-0' : '',
-				size === 'small' ? 'h-8 py-1.5 text-sm' : 'h-9 py-2 text-base',
-				'outline-none',
-				disabled ? 'cursor-not-allowed' : '',
-				error ? 'bg-highlight-red' : variant === 'outlined' ? 'bg-transparent' : 'bg-surface-4',
-				error ? 'border-red' : variant === 'outlined' ? 'border-button-bg' : 'border-surface-5',
-				variant === 'outlined'
-					? 'border border-solid rounded-l-xl border-r-0'
-					: 'border border-solid rounded-xl',
-			]"
-			@input="onInput"
-			@focus="isFocused = true"
-			@blur="isFocused = false"
-		/>
-
-		<CalendarIcon
-			v-if="isDateInput && !showClearButton"
-			class="pointer-events-none absolute right-3 top-1/2 z-[1] h-5 w-5 -translate-y-1/2 transition-colors"
-			:class="[isFocused ? 'opacity-100 text-contrast' : 'opacity-60 text-secondary']"
-			aria-hidden="true"
-		/>
-
-		<!-- Clear button (right side, filled variant, single-line only) -->
-		<button
-			v-if="showClearButton"
-			type="button"
-			class="absolute right-0.5 top-1/2 z-[1] flex h-full w-10 -translate-y-1/2 touch-manipulation items-center justify-center border-none bg-transparent p-0 transition-colors cursor-pointer select-none hover:opacity-100 hover:text-contrast"
-			:class="[isFocused ? 'opacity-100 text-contrast' : 'opacity-60 text-secondary']"
-			aria-label="Clear input"
-			@click="clear"
-		>
-			<XIcon class="h-5 w-5" />
-		</button>
-
-		<!-- Right icon button (outlined variant, single-line only) -->
-		<button
-			v-if="!multiline && variant === 'outlined'"
-			type="button"
-			class="flex touch-manipulation items-center justify-center px-2 bg-transparent border border-solid rounded-r-xl text-secondary hover:text-contrast transition-colors shrink-0"
-			:class="error ? 'border-red' : 'border-button-bg'"
-			:aria-label="clearable && model ? 'Clear input' : 'Search'"
-			:tabindex="clearable && model ? undefined : -1"
-			@click="clearable && model ? clear() : undefined"
-		>
-			<XIcon v-if="clearable && model" class="h-4 w-4" />
-			<component :is="icon" v-else-if="icon" class="h-4 w-4" />
-			<SearchIcon v-else class="h-4 w-4" />
-		</button>
-
-		<!-- Custom rightside slot -->
-		<slot name="right" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { CalendarIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import { type Component, computed, ref } from 'vue'
-
-const model = defineModel<string | number | undefined>()
-
-const props = withDefaults(
-	defineProps<{
-		icon?: Component
-		type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'search' | 'date' | 'datetime-local'
-		placeholder?: string
-		id?: string
-		name?: string
-		autocomplete?: string
-		autocorrect?: 'on' | 'off'
-		autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
-		spellcheck?: boolean
-		inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
-		maxlength?: number
-		min?: number
-		max?: number
-		step?: number
-		disabled?: boolean
-		readonly?: boolean
-		error?: boolean
-		size?: 'standard' | 'small'
-		variant?: 'filled' | 'outlined'
-		clearable?: boolean
-		multiline?: boolean
-		rows?: number
-		resize?: 'none' | 'vertical' | 'both'
-		inputClass?: string
-		wrapperClass?: string
-		inputAttrs?: Record<string, string | number | boolean | undefined>
-	}>(),
-	{
-		type: 'text',
-		size: 'standard',
-		variant: 'filled',
-		disabled: false,
-		readonly: false,
-		error: false,
-		clearable: false,
-		multiline: false,
-		rows: 3,
-		resize: 'none',
-	},
-)
-
-const emit = defineEmits<{
-	clear: []
-}>()
-
-const inputRef = ref<HTMLInputElement | HTMLTextAreaElement>()
-const isFocused = ref(false)
-const isDateInput = computed(
-	() => !props.multiline && (props.type === 'date' || props.type === 'datetime-local'),
-)
-const showClearButton = computed(
-	() =>
-		!props.multiline &&
-		props.clearable &&
-		Boolean(model.value) &&
-		!props.disabled &&
-		!props.readonly &&
-		props.variant === 'filled',
-)
-const resizeClass = computed(
-	() => ({ none: 'resize-none', vertical: 'resize-y', both: 'resize' })[props.resize ?? 'none'],
-)
-
-defineExpose({ focus: () => inputRef.value?.focus() })
-
-function onInput(event: Event) {
-	const target = event.target as HTMLInputElement | HTMLTextAreaElement
-	model.value =
-		props.type === 'number' && !props.multiline
-			? target.value === ''
-				? undefined
-				: Number(target.value)
-			: target.value
-}
-
-function clear() {
-	model.value = props.type === 'number' && !props.multiline ? undefined : ''
-	emit('clear')
-}
-</script>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index 7fa6262111..fba1536364 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -21,7 +21,6 @@ export type { ComboboxOption } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
 export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
-export { default as DatePicker } from './DatePicker.vue'
 export { default as DoubleIcon } from './DoubleIcon.vue'
 export { default as DropArea } from './DropArea.vue'
 export type { DropdownFilterBarCategory, DropdownFilterBarOption } from './DropdownFilterBar.vue'
@@ -82,7 +81,15 @@ export { default as SmartClickable } from './SmartClickable.vue'
 export type { StackedAdmonitionItem, StackedAdmonitionType } from './StackedAdmonitions.vue'
 export { default as StackedAdmonitions } from './StackedAdmonitions.vue'
 export { default as StatItem } from './StatItem.vue'
-export { default as StyledInput } from './StyledInput.vue'
+export {
+	DatePicker,
+	InputClearButton,
+	InputFrame,
+	NativeDateInput,
+	StyledInput,
+	StyledTextarea,
+} from './inputs'
+export type { InputAppearance, InputSize } from './inputs'
 export type { SortDirection, TableColumn } from './Table.vue'
 export { default as Table } from './Table.vue'
 export type { TabsTab, TabsValue } from './Tabs.vue'
diff --git a/packages/ui/src/components/base/DatePicker.vue b/packages/ui/src/components/base/inputs/DatePicker.vue
similarity index 97%
rename from packages/ui/src/components/base/DatePicker.vue
rename to packages/ui/src/components/base/inputs/DatePicker.vue
index 17ab811f74..6b55b552cf 100644
--- a/packages/ui/src/components/base/DatePicker.vue
+++ b/packages/ui/src/components/base/inputs/DatePicker.vue
@@ -5,7 +5,7 @@
 		:class="[
 			wrapperClass,
 			calendarOnly ? 'calendar-only' : '',
-			disabled ? 'cursor-not-allowed opacity-50' : '',
+			disabled ? 'cursor-not-allowed' : '',
 			showToday ? 'show-today' : '',
 			props.mode === 'range' && selectedDates.length < 2 ? 'can-select-range' : '',
 			props.mode === 'range' && selectedDates.length === 1 ? 'is-selecting-range' : '',
@@ -14,40 +14,50 @@
 			rangeEndpointMoveState ? 'is-moving-range-end' : '',
 		]"
 	>
-		<CalendarIcon
-			v-if="showIcon && !calendarOnly"
-			class="pointer-events-none absolute left-3 z-[1] h-5 w-5 text-secondary opacity-60 transition-colors"
-			aria-hidden="true"
-		/>
+		<InputFrame v-if="!calendarOnly" class="w-full" :disabled="disabled">
+			<template v-if="showIcon" #leading>
+				<span
+					class="flex size-5 shrink-0 items-center justify-center text-secondary opacity-60 transition-colors group-focus-within/input:text-contrast group-focus-within/input:opacity-100"
+					aria-hidden="true"
+				>
+					<CalendarIcon class="size-5" />
+				</span>
+			</template>
+			<input
+				:id="id"
+				ref="inputRef"
+				:name="name"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:readonly="readonly"
+				:autocomplete="autocomplete"
+				:class="inputClasses"
+				type="text"
+			/>
+			<template v-if="hasClearButton" #trailing>
+				<InputClearButton label="Clear date" @click.stop="clearValue" />
+			</template>
+		</InputFrame>
 		<input
+			v-else
 			:id="id"
 			ref="inputRef"
 			:name="name"
-			:placeholder="placeholder"
 			:disabled="disabled"
 			:readonly="readonly"
 			:autocomplete="autocomplete"
 			:class="inputClasses"
-			:tabindex="calendarOnly ? -1 : undefined"
-			:aria-hidden="calendarOnly ? 'true' : undefined"
+			tabindex="-1"
+			aria-hidden="true"
 			type="text"
 		/>
-		<button
-			v-if="hasClearButton"
-			type="button"
-			class="absolute right-0.5 top-px z-[1] touch-manipulation cursor-pointer select-none border-none bg-transparent p-2 text-secondary transition-colors hover:text-contrast"
-			aria-label="Clear date"
-			@click.stop="clearValue"
-		>
-			<XIcon class="h-5 w-5" aria-hidden="true" />
-		</button>
 	</div>
 </template>
 
 <script setup lang="ts">
 import 'flatpickr/dist/flatpickr.css'
 
-import { CalendarIcon, XIcon } from '@modrinth/assets'
+import { CalendarIcon } from '@modrinth/assets'
 import chevronLeftIcon from '@modrinth/assets/icons/chevron-left.svg?raw'
 import chevronRightIcon from '@modrinth/assets/icons/chevron-right.svg?raw'
 import flatpickr from 'flatpickr'
@@ -55,6 +65,9 @@ import type { Instance } from 'flatpickr/dist/types/instance'
 import type { Options } from 'flatpickr/dist/types/options'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import InputClearButton from './InputClearButton.vue'
+import InputFrame from './InputFrame.vue'
+
 type DatePickerValue = string | Date | null | undefined
 type RangeEdge = 'start' | 'end'
 type ViewDateAlignment = 'left' | 'right'
@@ -1188,12 +1201,7 @@ const hasClearButton = computed(
 const inputClasses = computed(() => [
 	props.calendarOnly
 		? 'sr-only pointer-events-none absolute h-0 w-0 opacity-0'
-		: 'w-full touch-manipulation text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow !outline-0',
-	!props.calendarOnly && props.showIcon ? 'pl-10' : '',
-	!props.calendarOnly && !props.showIcon ? 'pl-3' : '',
-	!props.calendarOnly
-		? `${hasClearButton.value ? 'pr-10' : 'pr-3'} h-9 py-2 text-base outline-none bg-surface-4 border-none rounded-xl`
-		: '',
+		: 'min-w-0 w-full flex-1 self-stretch appearance-none border-0 bg-transparent p-0 font-medium text-base text-primary shadow-none outline-none placeholder:text-secondary focus:text-contrast focus:ring-0',
 	props.disabled && !props.calendarOnly ? 'cursor-not-allowed' : '',
 	props.inputClass,
 ])
@@ -1545,7 +1553,7 @@ defineExpose({
 
 <style scoped>
 .modrinth-date-picker :deep(.flatpickr-wrapper) {
-	@apply w-full;
+	@apply min-w-0 w-full flex-1;
 }
 
 .modrinth-date-picker :deep(.flatpickr-calendar) {
diff --git a/packages/ui/src/components/base/inputs/InputClearButton.vue b/packages/ui/src/components/base/inputs/InputClearButton.vue
new file mode 100644
index 0000000000..cbb4f14cd8
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/InputClearButton.vue
@@ -0,0 +1,30 @@
+<template>
+	<button
+		type="button"
+		class="relative flex size-5 shrink-0 touch-manipulation cursor-pointer select-none items-center justify-center border-none bg-transparent p-0 text-secondary opacity-60 transition-colors before:absolute before:-inset-2 hover:text-contrast hover:opacity-100 focus-visible:text-contrast focus-visible:opacity-100 group-focus-within/input:text-contrast group-focus-within/input:opacity-100 disabled:pointer-events-none"
+		:aria-label="label"
+		:disabled="disabled"
+		@click="emit('click', $event)"
+	>
+		<XIcon class="size-5" aria-hidden="true" />
+	</button>
+</template>
+
+<script setup lang="ts">
+import { XIcon } from '@modrinth/assets'
+
+withDefaults(
+	defineProps<{
+		disabled?: boolean
+		label?: string
+	}>(),
+	{
+		disabled: false,
+		label: 'Clear input',
+	},
+)
+
+const emit = defineEmits<{
+	click: [event: MouseEvent]
+}>()
+</script>
diff --git a/packages/ui/src/components/base/inputs/InputFrame.vue b/packages/ui/src/components/base/inputs/InputFrame.vue
new file mode 100644
index 0000000000..7fdb9e8f18
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/InputFrame.vue
@@ -0,0 +1,59 @@
+<template>
+	<div
+		v-bind="$attrs"
+		class="group/input min-w-0 touch-manipulation border border-solid font-medium text-primary shadow-none transition-[background-color,border-color,box-shadow,color] focus-within:text-contrast focus-within:ring-4 focus-within:ring-brand-shadow"
+		:class="[
+			multiline ? 'flex w-full items-start gap-2 rounded-xl px-3 py-2' : sizeClass,
+			appearanceClass,
+			disabled ? 'cursor-not-allowed opacity-50' : '',
+		]"
+		:data-disabled="disabled || undefined"
+		:data-invalid="invalid || undefined"
+	>
+		<slot name="leading" />
+		<slot />
+		<slot name="trailing" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { InputAppearance, InputSize } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+	defineProps<{
+		appearance?: InputAppearance
+		disabled?: boolean
+		invalid?: boolean
+		multiline?: boolean
+		size?: InputSize
+	}>(),
+	{
+		appearance: 'surface',
+		disabled: false,
+		invalid: false,
+		multiline: false,
+		size: 'standard',
+	},
+)
+
+const sizeClass = computed(
+	() =>
+		({
+			small: 'inline-flex h-8 items-center gap-1.5 rounded-xl px-3',
+			standard: 'inline-flex h-9 items-center gap-2 rounded-xl px-3',
+			medium: 'inline-flex h-10 items-center gap-2 rounded-[14px] px-4',
+			large: 'inline-flex h-12 items-center gap-2 rounded-[14px] px-4',
+		})[props.size],
+)
+
+const appearanceClass = computed(() => {
+	if (props.invalid) return 'border-red bg-highlight-red'
+	if (props.appearance === 'transparent') return 'border-transparent bg-transparent'
+	if (props.appearance === 'button') return 'border-transparent bg-button-bg'
+	return 'border-surface-5 bg-surface-4'
+})
+</script>
diff --git a/packages/ui/src/components/base/inputs/NativeDateInput.vue b/packages/ui/src/components/base/inputs/NativeDateInput.vue
new file mode 100644
index 0000000000..95e452031a
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/NativeDateInput.vue
@@ -0,0 +1,146 @@
+<template>
+	<InputFrame
+		:appearance="appearance"
+		:class="[wrapperClass, attrs.class]"
+		:disabled="disabled"
+		:invalid="error"
+		:size="size"
+		:style="attrs.style"
+	>
+		<input
+			v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
+			:id="id"
+			ref="inputRef"
+			:type="type"
+			:value="model"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			:name="name"
+			:autocomplete="autocomplete"
+			:min="min"
+			:max="max"
+			:step="step"
+			:aria-invalid="error || undefined"
+			class="min-w-0 w-full flex-1 self-stretch appearance-none border-0 bg-transparent p-0 font-medium text-primary shadow-none outline-none placeholder:text-secondary focus:text-contrast focus:ring-0 [&::-webkit-calendar-picker-indicator]:hidden"
+			:class="[
+				inputClass,
+				controlClass,
+				size === 'small' ? 'text-sm' : 'text-base',
+				disabled ? 'cursor-not-allowed' : '',
+			]"
+			@input="onInput"
+		/>
+
+		<template #trailing>
+			<span class="flex shrink-0 items-center gap-2">
+				<InputClearButton
+					v-if="showClearButton"
+					:label="clearLabel"
+					@click="clear"
+				/>
+				<button
+					type="button"
+					class="relative flex size-5 shrink-0 touch-manipulation cursor-pointer select-none items-center justify-center border-none bg-transparent p-0 text-secondary opacity-60 transition-colors before:absolute before:-inset-2 hover:text-contrast hover:opacity-100 focus-visible:text-contrast focus-visible:opacity-100 group-focus-within/input:text-contrast group-focus-within/input:opacity-100 disabled:pointer-events-none"
+					:aria-label="pickerLabel"
+					:disabled="disabled || readonly"
+					@click="openPicker"
+				>
+					<CalendarIcon class="size-5" aria-hidden="true" />
+				</button>
+			</span>
+		</template>
+	</InputFrame>
+</template>
+
+<script setup lang="ts">
+import { CalendarIcon } from '@modrinth/assets'
+import { computed, type InputHTMLAttributes, mergeProps, ref, useAttrs } from 'vue'
+
+import InputClearButton from './InputClearButton.vue'
+import InputFrame from './InputFrame.vue'
+import type { InputAppearance, InputSize } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const model = defineModel<string | undefined>()
+const attrs = useAttrs()
+
+const props = withDefaults(
+	defineProps<{
+		appearance?: InputAppearance
+		autocomplete?: string
+		clearLabel?: string
+		clearable?: boolean
+		controlClass?: string
+		disabled?: boolean
+		error?: boolean
+		id?: string
+		inputAttrs?: InputHTMLAttributes
+		inputClass?: string
+		max?: string
+		min?: string
+		name?: string
+		pickerLabel?: string
+		placeholder?: string
+		readonly?: boolean
+		size?: InputSize
+		step?: number
+		type?: 'date' | 'datetime-local'
+		wrapperClass?: string
+	}>(),
+	{
+		appearance: 'surface',
+		clearLabel: 'Clear date',
+		clearable: false,
+		disabled: false,
+		error: false,
+		pickerLabel: 'Open date picker',
+		readonly: false,
+		size: 'standard',
+		type: 'date',
+	},
+)
+
+const emit = defineEmits<{
+	clear: []
+	input: [event: Event]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const hasValue = computed(() => model.value !== undefined && model.value !== '')
+const showClearButton = computed(
+	() => props.clearable && hasValue.value && !props.disabled && !props.readonly,
+)
+
+defineExpose({ focus: () => inputRef.value?.focus() })
+
+function controlAttrs() {
+	const { class: _class, style: _style, ...rest } = attrs
+	return rest
+}
+
+function onInput(event: Event) {
+	model.value = (event.target as HTMLInputElement).value
+	emit('input', event)
+}
+
+function clear() {
+	model.value = ''
+	emit('clear')
+}
+
+function openPicker() {
+	if (props.disabled || props.readonly) return
+
+	const input = inputRef.value
+	if (!input) return
+
+	input.focus()
+	if (input.showPicker) {
+		input.showPicker()
+	} else {
+		input.click()
+	}
+}
+</script>
diff --git a/packages/ui/src/components/base/inputs/StyledInput.vue b/packages/ui/src/components/base/inputs/StyledInput.vue
new file mode 100644
index 0000000000..e2c4131b4d
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/StyledInput.vue
@@ -0,0 +1,154 @@
+<template>
+	<InputFrame
+		:appearance="appearance"
+		:class="[wrapperClass, attrs.class]"
+		:disabled="disabled"
+		:invalid="error"
+		:size="size"
+		:style="attrs.style"
+	>
+		<template v-if="icon || $slots.leading" #leading>
+			<span
+				class="flex size-5 shrink-0 items-center justify-center text-secondary opacity-60 transition-colors [&>svg]:size-5 group-focus-within/input:text-contrast group-focus-within/input:opacity-100"
+				aria-hidden="true"
+			>
+				<slot name="leading">
+					<component :is="icon" />
+				</slot>
+			</span>
+		</template>
+
+		<input
+			v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
+			:id="id"
+			ref="inputRef"
+			:type="type"
+			:value="model"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			:name="name"
+			:autocomplete="autocomplete"
+			:autocorrect="autocorrect"
+			:autocapitalize="autocapitalize"
+			:spellcheck="spellcheck"
+			:inputmode="inputmode"
+			:maxlength="maxlength"
+			:min="min"
+			:max="max"
+			:step="step"
+			:aria-invalid="error || undefined"
+			class="min-w-0 w-full flex-1 self-stretch appearance-none border-0 bg-transparent p-0 font-medium text-primary shadow-none outline-none placeholder:text-secondary focus:text-contrast focus:ring-0"
+			:class="[
+				inputClass,
+				controlClass,
+				size === 'small' ? 'text-sm' : 'text-base',
+				disabled ? 'cursor-not-allowed' : '',
+			]"
+			@input="onInput"
+		/>
+
+		<template v-if="showClearButton || $slots.trailing || $slots.right" #trailing>
+			<span class="flex shrink-0 items-center gap-2">
+				<InputClearButton v-if="showClearButton" :label="clearLabel" @click="clear" />
+				<slot name="trailing" />
+				<slot name="right" />
+			</span>
+		</template>
+	</InputFrame>
+</template>
+
+<script setup lang="ts">
+import {
+	type Component,
+	computed,
+	type InputHTMLAttributes,
+	mergeProps,
+	ref,
+	useAttrs,
+} from 'vue'
+
+import InputClearButton from './InputClearButton.vue'
+import InputFrame from './InputFrame.vue'
+import type { InputAppearance, InputSize } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const model = defineModel<string | number | undefined>()
+const attrs = useAttrs()
+
+const props = withDefaults(
+	defineProps<{
+		appearance?: InputAppearance
+		autocomplete?: string
+		autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
+		autocorrect?: 'on' | 'off'
+		clearLabel?: string
+		clearable?: boolean
+		controlClass?: string
+		disabled?: boolean
+		error?: boolean
+		icon?: Component
+		id?: string
+		inputAttrs?: InputHTMLAttributes
+		inputClass?: string
+		inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+		max?: number
+		maxlength?: number
+		min?: number
+		name?: string
+		placeholder?: string
+		readonly?: boolean
+		size?: InputSize
+		spellcheck?: boolean
+		step?: number
+		type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'search'
+		wrapperClass?: string
+	}>(),
+	{
+		appearance: 'surface',
+		clearLabel: 'Clear input',
+		clearable: false,
+		disabled: false,
+		error: false,
+		readonly: false,
+		size: 'standard',
+		type: 'text',
+	},
+)
+
+const emit = defineEmits<{
+	clear: []
+	input: [event: Event]
+}>()
+
+const inputRef = ref<HTMLInputElement>()
+const hasValue = computed(() => model.value !== undefined && model.value !== '')
+const showClearButton = computed(
+	() => props.clearable && hasValue.value && !props.disabled && !props.readonly,
+)
+
+defineExpose({ focus: () => inputRef.value?.focus() })
+
+function controlAttrs() {
+	const { class: _class, style: _style, ...rest } = attrs
+	return rest
+}
+
+function onInput(event: Event) {
+	const target = event.target as HTMLInputElement
+	model.value =
+		props.type === 'number'
+			? target.value === ''
+				? undefined
+				: target.valueAsNumber
+			: target.value
+
+	emit('input', event)
+}
+
+function clear() {
+	model.value = props.type === 'number' ? undefined : ''
+	emit('clear')
+}
+</script>
diff --git a/packages/ui/src/components/base/inputs/StyledTextarea.vue b/packages/ui/src/components/base/inputs/StyledTextarea.vue
new file mode 100644
index 0000000000..32749d0fc0
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/StyledTextarea.vue
@@ -0,0 +1,111 @@
+<template>
+	<InputFrame
+		:appearance="appearance"
+		:class="[wrapperClass, attrs.class]"
+		:disabled="disabled"
+		:invalid="error"
+		multiline
+		:style="attrs.style"
+	>
+		<template v-if="$slots.leading" #leading>
+			<span
+				class="flex size-5 shrink-0 items-center justify-center text-secondary opacity-60 transition-colors [&>svg]:size-5 group-focus-within/input:text-contrast group-focus-within/input:opacity-100"
+				aria-hidden="true"
+			>
+				<slot name="leading" />
+			</span>
+		</template>
+
+		<textarea
+			v-bind="mergeProps(controlAttrs(), inputAttrs ?? {})"
+			:id="id"
+			ref="inputRef"
+			:value="model"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			:name="name"
+			:autocomplete="autocomplete"
+			:autocorrect="autocorrect"
+			:autocapitalize="autocapitalize"
+			:spellcheck="spellcheck"
+			:maxlength="maxlength"
+			:rows="rows"
+			:aria-invalid="error || undefined"
+			class="min-h-0 min-w-0 w-full flex-1 self-stretch appearance-none border-0 bg-transparent p-0 font-medium text-base text-primary shadow-none outline-none placeholder:text-secondary focus:text-contrast focus:ring-0"
+			:class="[inputClass, controlClass, resizeClass, disabled ? 'cursor-not-allowed' : '']"
+			@input="onInput"
+		/>
+
+		<template v-if="$slots.trailing || $slots.right" #trailing>
+			<span class="flex shrink-0 items-start gap-2">
+				<slot name="trailing" />
+				<slot name="right" />
+			</span>
+		</template>
+	</InputFrame>
+</template>
+
+<script setup lang="ts">
+import { computed, mergeProps, ref, type TextareaHTMLAttributes, useAttrs } from 'vue'
+
+import InputFrame from './InputFrame.vue'
+import type { InputAppearance } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const model = defineModel<string | undefined>()
+const attrs = useAttrs()
+
+const props = withDefaults(
+	defineProps<{
+		appearance?: InputAppearance
+		autocomplete?: string
+		autocapitalize?: 'none' | 'off' | 'sentences' | 'words' | 'characters'
+		autocorrect?: 'on' | 'off'
+		controlClass?: string
+		disabled?: boolean
+		error?: boolean
+		id?: string
+		inputAttrs?: TextareaHTMLAttributes
+		inputClass?: string
+		maxlength?: number
+		name?: string
+		placeholder?: string
+		readonly?: boolean
+		resize?: 'none' | 'vertical' | 'both'
+		rows?: number
+		spellcheck?: boolean
+		wrapperClass?: string
+	}>(),
+	{
+		appearance: 'surface',
+		disabled: false,
+		error: false,
+		readonly: false,
+		resize: 'none',
+		rows: 3,
+	},
+)
+
+const emit = defineEmits<{
+	input: [event: Event]
+}>()
+
+const inputRef = ref<HTMLTextAreaElement>()
+const resizeClass = computed(
+	() => ({ none: 'resize-none', vertical: 'resize-y', both: 'resize' })[props.resize],
+)
+
+defineExpose({ focus: () => inputRef.value?.focus() })
+
+function controlAttrs() {
+	const { class: _class, style: _style, ...rest } = attrs
+	return rest
+}
+
+function onInput(event: Event) {
+	model.value = (event.target as HTMLTextAreaElement).value
+	emit('input', event)
+}
+</script>
diff --git a/packages/ui/src/components/base/inputs/index.ts b/packages/ui/src/components/base/inputs/index.ts
new file mode 100644
index 0000000000..3d504c56ff
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/index.ts
@@ -0,0 +1,7 @@
+export { default as DatePicker } from './DatePicker.vue'
+export { default as InputClearButton } from './InputClearButton.vue'
+export { default as InputFrame } from './InputFrame.vue'
+export { default as NativeDateInput } from './NativeDateInput.vue'
+export { default as StyledInput } from './StyledInput.vue'
+export { default as StyledTextarea } from './StyledTextarea.vue'
+export type { InputAppearance, InputSize } from './types'
diff --git a/packages/ui/src/components/base/inputs/types.ts b/packages/ui/src/components/base/inputs/types.ts
new file mode 100644
index 0000000000..a1fa179fb1
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/types.ts
@@ -0,0 +1,2 @@
+export type InputAppearance = 'button' | 'surface' | 'transparent'
+export type InputSize = 'small' | 'standard' | 'medium' | 'large'

From 22bfca467a473f531ab17fc1eb0405a798053cb1 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Wed, 15 Jul 2026 14:46:08 +0100
Subject: [PATCH 3/3] refactor: migrate to new input components

---
 .../affiliate/AffiliateLinkCreateModal.vue    |  16 +-
 .../ui/src/components/base/BaseTerminal.vue   |   4 +-
 packages/ui/src/components/base/Combobox.vue  |  21 +--
 .../src/components/base/DropdownFilterBar.vue |   5 +-
 .../ui/src/components/base/I18nDebugPanel.vue |   2 +-
 .../ui/src/components/base/MarkdownEditor.vue |   2 +-
 .../ui/src/components/base/MultiSelect.vue    |   5 +-
 packages/ui/src/components/base/Slider.vue    |   2 +-
 .../src/components/base/TimeFramePicker.vue   |   2 +-
 .../src/components/billing/PurchaseModal.vue  |   2 +-
 .../components/content/CollectionWidget.vue   |   4 +-
 .../AddFilesToAttributionGroupModal.vue       |   2 +-
 .../AddToGlobalPermissionsDatabaseModal.vue   |   7 +-
 .../external_files/AttributionEditor.vue      |  13 +-
 .../ExternalProjectPermissionsCard.vue        |   6 +-
 .../components/CustomSetupStage.vue           |   2 +-
 .../components/FinalConfigStage.vue           |   6 +-
 .../components/ImportInstanceStage.vue        |   2 +-
 .../ui/src/components/modal/ConfirmModal.vue  |   2 +-
 .../ui/src/components/modal/ShareModal.vue    |  10 +-
 .../components/search/SearchSidebarFilter.vue |   2 +-
 .../servers/backups/BackupCreateModal.vue     |   2 +-
 .../servers/backups/BackupRenameModal.vue     |   2 +-
 .../components/settings/LanguageSelector.vue  |   2 +-
 .../ui/src/components/version/VersionPage.vue |   2 +-
 .../src/layouts/shared/browse-tab/layout.vue  |   4 +-
 .../ui/src/layouts/shared/console/layout.vue  |   4 +-
 .../components/modals/ContentInstallModal.vue |   2 +-
 .../components/modals/ModpackContentModal.vue |   2 +-
 .../modals/content-updater-modal/index.vue    |   2 +-
 .../src/layouts/shared/content-tab/layout.vue |   4 +-
 .../files-tab/components/FileNavbar.vue       |   9 +-
 .../components/editor/EditorFindReplace.vue   |   2 +-
 .../components/modals/FileCreateItemModal.vue |   2 +-
 .../components/modals/FileMoveItemModal.vue   |   2 +-
 .../components/modals/FileRenameItemModal.vue |   2 +-
 .../modals/FileUploadZipUrlModal.vue          |   2 +-
 .../shared/server-settings/pages/advanced.vue |   5 +-
 .../hosting/manage/[id]/access/access.vue     |   4 +-
 .../ui/src/stories/base/DatePicker.stories.ts |   2 +-
 .../stories/base/NativeDateInput.stories.ts   |  41 +++++
 .../src/stories/base/StyledInput.stories.ts   | 145 ++----------------
 .../stories/base/StyledTextarea.stories.ts    |  61 ++++++++
 43 files changed, 195 insertions(+), 225 deletions(-)
 create mode 100644 packages/ui/src/stories/base/NativeDateInput.stories.ts
 create mode 100644 packages/ui/src/stories/base/StyledTextarea.stories.ts

diff --git a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
index 217102b74e..22bda76c7a 100644
--- a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
+++ b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
@@ -28,13 +28,6 @@
 			</label>
 			<div class="flex items-center gap-2">
 				<div class="relative inline-flex items-center flex-1">
-					<AutoBrandIcon
-						:keyword="affiliateLinkTitle"
-						aria-hidden="true"
-						class="absolute left-3 h-5 w-5 z-[1] pointer-events-none text-secondary"
-					>
-						<AffiliateIcon />
-					</AutoBrandIcon>
 					<StyledInput
 						id="create-affiliate-title-input"
 						v-model="affiliateLinkTitle"
@@ -43,8 +36,13 @@
 						:placeholder="formatMessage(messages.createTitlePlaceholder)"
 						clearable
 						wrapper-class="w-full"
-						input-class="pl-10"
-					/>
+					>
+						<template #leading>
+							<AutoBrandIcon :keyword="affiliateLinkTitle">
+								<AffiliateIcon />
+							</AutoBrandIcon>
+						</template>
+					</StyledInput>
 				</div>
 				<ButtonStyled color="brand">
 					<button :disabled="creatingLink || !canCreate" @click="createAffiliateLink">
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index ff1f37419b..54a765086e 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -31,7 +31,7 @@
 				:placeholder="disableInput ? disabledInputPlaceholder : 'Send a command'"
 				:disabled="disableInput"
 				wrapper-class="w-full"
-				input-class="!h-10"
+				size="medium"
 				@keydown.enter="submitCommand"
 			/>
 		</div>
@@ -44,7 +44,7 @@ import type { Terminal } from '@xterm/xterm'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import { useTerminal } from '#ui/composables/terminal'
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 17821812a4..0915d9adc6 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -2,15 +2,11 @@
 	<div ref="containerRef" class="relative inline-block w-full">
 		<!-- Searchable mode: input trigger -->
 		<div v-if="searchable" class="relative w-full rounded-xl bg-surface-4">
-			<!--
-				Selection mirror: horizontal padding must match StyledInput (filled + left icon uses `pl-10`,
-				else `pl-3`) and `searchableInputClass` when the chevron is shown (`!pr-9`), or the overlay
-				text will not line up with the transparent input text / caret.
-			-->
+			<!-- Selection mirror must match InputFrame's leading and trailing slot geometry. -->
 			<div
 				v-if="searchSelectionOverlayVisible"
-				class="pointer-events-none absolute inset-y-0 left-0 right-0 z-0 flex min-w-0 items-center gap-2 font-medium text-primary"
-				:class="[showSearchIcon ? 'pl-10' : 'pl-3', showChevron ? 'pr-9' : 'pr-3']"
+				class="pointer-events-none absolute inset-y-0 left-0 right-0 z-[2] flex min-w-0 items-center gap-2 font-medium text-primary"
+				:class="[showSearchIcon ? 'pl-10' : 'pl-3', showChevron ? 'pr-10' : 'pr-3']"
 				aria-hidden="true"
 			>
 				<span class="min-w-0 truncate">{{ searchQuery }}</span>
@@ -30,7 +26,7 @@
 				:spellcheck="searchSpellcheck"
 				:inputmode="searchInputmode"
 				:input-attrs="searchInputAttrs"
-				wrapper-class="w-full !bg-transparent"
+				wrapper-class="w-full"
 				:input-class="searchableInputClass"
 				class="relative z-[1]"
 				@input="handleSearchInput"
@@ -39,9 +35,9 @@
 				@focusout="handleSearchFocusout"
 				@click="handleSearchClick"
 			>
-				<template v-if="showChevron" #right>
+				<template v-if="showChevron" #trailing>
 					<ChevronLeftIcon
-						class="pointer-events-none absolute right-3 top-1/2 size-5 -translate-y-1/2 text-secondary transition-transform duration-150"
+						class="pointer-events-none size-5 text-secondary transition-transform duration-150"
 						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
 					/>
 				</template>
@@ -217,7 +213,7 @@ import {
 	watch,
 } from 'vue'
 
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 export interface ComboboxOption<T> {
 	value: T
@@ -389,8 +385,7 @@ const searchSelectionOverlayVisible = computed(() => {
 })
 
 const searchableInputClass = computed(() => {
-	const parts = ['!bg-transparent']
-	if (props.showChevron) parts.push('!pr-9')
+	const parts: string[] = []
 	if (searchSelectionOverlayVisible.value) {
 		parts.push('!text-transparent [caret-color:var(--color-text-primary)] selection:bg-transparent')
 	}
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 73d61e6507..5cc2cfe05e 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -197,8 +197,7 @@
 					:icon="SearchIcon"
 					type="text"
 					:placeholder="activeCategory.searchPlaceholder ?? 'Search...'"
-					wrapper-class="grow bg-surface-4 mx-1"
-					input-class="ps-9 mx-1.5"
+					wrapper-class="grow mx-1"
 				/>
 				<slot
 					name="search-actions"
@@ -388,7 +387,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useVirtualScroll } from '../../composables/virtual-scroll'
 import ButtonStyled from './ButtonStyled.vue'
 import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 export type DropdownFilterBarOption = {
 	value: string
diff --git a/packages/ui/src/components/base/I18nDebugPanel.vue b/packages/ui/src/components/base/I18nDebugPanel.vue
index 3d00bf6240..86f83784c5 100644
--- a/packages/ui/src/components/base/I18nDebugPanel.vue
+++ b/packages/ui/src/components/base/I18nDebugPanel.vue
@@ -12,7 +12,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import { injectI18nDebug } from '../../composables/i18n-debug'
 import ButtonStyled from './ButtonStyled.vue'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 const debugContext = injectI18nDebug()
 
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 87e932b62b..6fff656b11 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -340,7 +340,7 @@ import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
 import IntlFormatted from './IntlFormatted.vue'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 import Toggle from './Toggle.vue'
 
 const { formatMessage } = useVIntl()
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index 25a19b715d..7fe8e5bf9b 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -133,8 +133,7 @@
 								:icon="SearchIcon"
 								type="text"
 								:placeholder="searchPlaceholder"
-								wrapper-class="grow bg-surface-4 mx-0"
-								input-class="ps-9 mx-1.5"
+								wrapper-class="grow"
 								@input="handleSearchInput"
 								@keydown="handleSearchKeydown"
 							/>
@@ -415,7 +414,7 @@ import {
 } from 'vue'
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 export interface MultiSelectOption<T> {
 	value: T
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index 6c1e30c105..a73376c56f 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import StyledInput from './StyledInput.vue'
+import StyledInput from './inputs/StyledInput.vue'
 
 const emit = defineEmits<{ 'update:modelValue': [number] }>()
 
diff --git a/packages/ui/src/components/base/TimeFramePicker.vue b/packages/ui/src/components/base/TimeFramePicker.vue
index 0db65f9e14..8c5a6dfcae 100644
--- a/packages/ui/src/components/base/TimeFramePicker.vue
+++ b/packages/ui/src/components/base/TimeFramePicker.vue
@@ -199,7 +199,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import ButtonStyled from './ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from './Combobox.vue'
-import DatePicker from './DatePicker.vue'
+import DatePicker from './inputs/DatePicker.vue'
 
 export type TimeFramePreset =
 	| 'today'
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index d1753d10a0..3e0230fb5a 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -477,7 +477,7 @@ import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Combobox from '../base/Combobox.vue'
 import Slider from '../base/Slider.vue'
-import StyledInput from '../base/StyledInput.vue'
+import StyledInput from '../base/inputs/StyledInput.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
 import LoaderIcon from '../servers/icons/LoaderIcon.vue'
diff --git a/packages/ui/src/components/content/CollectionWidget.vue b/packages/ui/src/components/content/CollectionWidget.vue
index a7e5608f16..1d9a62a315 100644
--- a/packages/ui/src/components/content/CollectionWidget.vue
+++ b/packages/ui/src/components/content/CollectionWidget.vue
@@ -10,7 +10,7 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
 import { injectModrinthClient } from '../../providers/api-client'
 import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
-import StyledInput from '../base/StyledInput.vue'
+import StyledInput from '../base/inputs/StyledInput.vue'
 
 const { formatMessage } = useVIntl()
 const { formatCompactNumber } = useCompactNumber()
@@ -109,7 +109,7 @@ const messages = defineMessages({
 				v-if="(projects?.length ?? 0) > 5"
 				v-model="query"
 				:placeholder="formatMessage(messages.searchPlaceholder)"
-				input-class="bg-transparent !rounded-l-none !rounded-b-none m-1"
+				wrapper-class="m-1 !rounded-l-none !rounded-b-none !bg-transparent"
 				:icon="SearchIcon"
 				:disabled="isLoadingCollection || isLoadingProjects"
 			/>
diff --git a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
index fc94cf5af1..e1340b4bc7 100644
--- a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
+++ b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
@@ -197,7 +197,7 @@ defineExpose({ show, hide })
 				:placeholder="formatMessage(messages.addFilesModalSearchPlaceholder)"
 				:icon="SearchIcon"
 				:disabled="pending"
-				input-class="h-[40px]"
+				size="medium"
 				class="sticky top-0"
 				clearable
 			/>
diff --git a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
index c3a55d80d0..ab28b571a9 100644
--- a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
+++ b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
@@ -11,6 +11,7 @@ import {
 	type ComboboxOption,
 	NewModal,
 	StyledInput,
+	StyledTextarea,
 } from '#ui/components'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
@@ -175,7 +176,7 @@ defineExpose({ show, hide })
 						v-model="flameProjectId"
 						type="text"
 						placeholder="1234567"
-						input-class="h-[40px]"
+						size="medium"
 						:disabled="createMutation.isPending.value"
 					/>
 				</div>
@@ -193,11 +194,9 @@ defineExpose({ show, hide })
 			</div>
 			<div class="flex flex-col gap-2">
 				<label class="font-semibold text-contrast" for="add-global-proof">Proof or notes</label>
-				<StyledInput
+				<StyledTextarea
 					id="add-global-proof"
 					v-model="proof"
-					type="text"
-					multiline
 					input-class="min-h-[6rem]"
 					resize="vertical"
 					:disabled="createMutation.isPending.value"
diff --git a/packages/ui/src/components/external_files/AttributionEditor.vue b/packages/ui/src/components/external_files/AttributionEditor.vue
index 3694793a02..47b401f894 100644
--- a/packages/ui/src/components/external_files/AttributionEditor.vue
+++ b/packages/ui/src/components/external_files/AttributionEditor.vue
@@ -14,7 +14,14 @@ import { builtinLicenses } from '@modrinth/utils'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { ButtonStyled, Chips, Combobox, type ComboboxOption, StyledInput } from '#ui/components'
+import {
+	ButtonStyled,
+	Chips,
+	Combobox,
+	type ComboboxOption,
+	StyledInput,
+	StyledTextarea,
+} from '#ui/components'
 import { FileInput } from '#ui/components/base'
 import { commonMessages } from '#ui/utils'
 
@@ -542,11 +549,9 @@ function cancelEditing() {
 							formatMessage(selectedPermissionReason.notesDescription)
 						}}</span>
 					</div>
-					<StyledInput
+					<StyledTextarea
 						v-model="notesInput"
-						type="text"
 						resize="both"
-						multiline
 						:rows="notesInputRows"
 						class="max-w-[40rem]"
 						:placeholder="formatMessage(messages.notesPlaceholder)"
diff --git a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
index aa413d115e..0d8b99c0ac 100644
--- a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
@@ -30,7 +30,8 @@ import {
 	injectProjectPageContext,
 } from '../../providers'
 import type { QuickReply } from '../../providers/attribution-moderation'
-import StyledInput from '../base/StyledInput.vue'
+import StyledInput from '../base/inputs/StyledInput.vue'
+import StyledTextarea from '../base/inputs/StyledTextarea.vue'
 import AddFilesToAttributionGroupModal from './AddFilesToAttributionGroupModal.vue'
 import AddToExistingExternalProjectModal from './AddToExistingExternalProjectModal.vue'
 import AddToGlobalPermissionsDatabaseModal from './AddToGlobalPermissionsDatabaseModal.vue'
@@ -684,9 +685,8 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 										</div>
 									</template>
 									<template v-else>
-										<StyledInput
+										<StyledTextarea
 											v-model="reviewReasonInput"
-											multiline
 											placeholder="Explanation of review (optional)"
 											class="mt-3"
 										/>
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
index 2d20d1a1a0..0f307d1eb7 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue
@@ -162,7 +162,7 @@ import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
 import PaperChannelBadge from '../../../base/PaperChannelBadge.vue'
-import StyledInput from '../../../base/StyledInput.vue'
+import StyledInput from '../../../base/inputs/StyledInput.vue'
 import type { LoaderVersionEntry, LoaderVersionType } from '../creation-flow-context'
 import { injectCreationFlowContext } from '../creation-flow-context'
 import { formatLoaderLabel } from '../shared'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
index d624cd40a4..aab521d7ad 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue
@@ -107,10 +107,9 @@
 						:options="generatorSettingsOptions"
 						:placeholder="formatMessage(messages.generatorSettingsPlaceholder)"
 					/>
-					<StyledInput
+					<StyledTextarea
 						v-if="generatorSettingsMode === 'custom'"
 						v-model="generatorSettingsCustom"
-						multiline
 						:rows="4"
 						:placeholder="formatMessage(messages.generatorSettingsJsonPlaceholder)"
 						input-class="font-mono"
@@ -144,7 +143,8 @@ import { injectTags } from '../../../../providers'
 import Accordion from '../../../base/Accordion.vue'
 import Chips from '../../../base/Chips.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
-import StyledInput from '../../../base/StyledInput.vue'
+import StyledInput from '../../../base/inputs/StyledInput.vue'
+import StyledTextarea from '../../../base/inputs/StyledTextarea.vue'
 import Toggle from '../../../base/Toggle.vue'
 import type { Difficulty, Gamemode, GeneratorSettingsMode } from '../creation-flow-context'
 import { injectCreationFlowContext } from '../creation-flow-context'
diff --git a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
index 6351399bd3..1247477e59 100644
--- a/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
+++ b/packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue
@@ -113,7 +113,7 @@ import type { ImportableLauncher } from '../../../../providers/instance-import'
 import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Checkbox from '../../../base/Checkbox.vue'
 import Collapsible from '../../../base/Collapsible.vue'
-import StyledInput from '../../../base/StyledInput.vue'
+import StyledInput from '../../../base/inputs/StyledInput.vue'
 import { injectCreationFlowContext } from '../creation-flow-context'
 
 const ctx = injectCreationFlowContext()
diff --git a/packages/ui/src/components/modal/ConfirmModal.vue b/packages/ui/src/components/modal/ConfirmModal.vue
index 87a091324e..7835a28f6d 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -54,7 +54,7 @@ import { renderString } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 import ButtonStyled from '../base/ButtonStyled.vue'
-import StyledInput from '../base/StyledInput.vue'
+import StyledInput from '../base/inputs/StyledInput.vue'
 import NewModal from './NewModal.vue'
 
 const props = defineProps({
diff --git a/packages/ui/src/components/modal/ShareModal.vue b/packages/ui/src/components/modal/ShareModal.vue
index db9c485c1b..5b65b0df18 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -14,7 +14,7 @@ import { computed, nextTick, ref } from 'vue'
 
 import { injectNotificationManager } from '#ui/providers'
 
-import { ButtonStyled, NewModal, StyledInput } from '../index'
+import { ButtonStyled, NewModal, StyledTextarea } from '../index'
 
 const props = defineProps({
 	header: {
@@ -167,27 +167,25 @@ defineExpose({
 						</button>
 					</ButtonStyled>
 				</div>
-				<StyledInput
+				<StyledTextarea
 					v-else
 					v-model="content"
-					multiline
 					resize="vertical"
 					wrapper-class="h-full w-[30rem]"
 				>
-					<template #right>
+					<template #trailing>
 						<ButtonStyled circular type="transparent">
 							<button
 								v-tooltip="'Copy Text'"
 								type="button"
 								aria-label="Copy Text"
-								class="absolute top-0 right-0 m-2"
 								@click="copyText"
 							>
 								<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
 							</button>
 						</ButtonStyled>
 					</template>
-				</StyledInput>
+				</StyledTextarea>
 				<div
 					v-if="link || socialButtons"
 					:class="['flex flex-col justify-center gap-2', link ? 'w-64 max-w-full' : 'flex-grow']"
diff --git a/packages/ui/src/components/search/SearchSidebarFilter.vue b/packages/ui/src/components/search/SearchSidebarFilter.vue
index 99ca2b54ec..7604be86bb 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -101,7 +101,7 @@
 					autocomplete="off"
 					clearable
 					size="small"
-					input-class="!bg-button-bg"
+					appearance="button"
 					wrapper-class="mx-2 my-1 w-[calc(100%-1rem)]"
 				/>
 				<ScrollablePanel :class="{ 'h-[16rem]': scrollable }" :disable-scrolling="!scrollable">
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index 363f428cc7..f8b4102524 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -81,7 +81,7 @@ import {
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import StyledInput from '../../base/StyledInput.vue'
+import StyledInput from '../../base/inputs/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/packages/ui/src/components/servers/backups/BackupRenameModal.vue b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
index 54d090990a..0c79250fd4 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -63,7 +63,7 @@ import {
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
 import ButtonStyled from '../../base/ButtonStyled.vue'
-import StyledInput from '../../base/StyledInput.vue'
+import StyledInput from '../../base/inputs/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/packages/ui/src/components/settings/LanguageSelector.vue b/packages/ui/src/components/settings/LanguageSelector.vue
index 18e41ff84d..2677d64c14 100644
--- a/packages/ui/src/components/settings/LanguageSelector.vue
+++ b/packages/ui/src/components/settings/LanguageSelector.vue
@@ -11,7 +11,7 @@ import {
 } from '../../composables/i18n'
 import { metaLocaleModules } from '../../locales.ts'
 import { isModifierKeyDown } from '../../utils/events'
-import StyledInput from '../base/StyledInput.vue'
+import StyledInput from '../base/inputs/StyledInput.vue'
 
 const { formatMessage } = useVIntl()
 
diff --git a/packages/ui/src/components/version/VersionPage.vue b/packages/ui/src/components/version/VersionPage.vue
index 733842d14a..82816573a6 100644
--- a/packages/ui/src/components/version/VersionPage.vue
+++ b/packages/ui/src/components/version/VersionPage.vue
@@ -25,7 +25,7 @@ import {
 
 import AutoLink from '../base/AutoLink.vue'
 import Avatar from '../base/Avatar.vue'
-import StyledInput from '../base/StyledInput.vue'
+import StyledInput from '../base/inputs/StyledInput.vue'
 import Table from '../base/Table.vue'
 import TagItem from '../base/TagItem.vue'
 import TagTagItem from '../base/TagTagItem.vue'
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index e2126d2b04..3ab1624c11 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -8,7 +8,7 @@ import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import Pagination from '#ui/components/base/Pagination.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
 import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
@@ -94,7 +94,7 @@ const messages = defineMessages({
 		"
 		clearable
 		wrapper-class="w-full"
-		:input-class="ctx.variant === 'web' ? '!h-12' : 'h-12'"
+		size="large"
 		@clear="ctx.clearSearch()"
 	/>
 
diff --git a/packages/ui/src/layouts/shared/console/layout.vue b/packages/ui/src/layouts/shared/console/layout.vue
index 038f596fd4..0cec38339a 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -20,7 +20,7 @@
 				:icon="SearchIcon"
 				placeholder="Search logs"
 				wrapper-class="flex-1"
-				input-class="!h-10"
+				size="medium"
 				clearable
 			/>
 			<div v-if="ctx.logSources?.value && ctx.activeLogSourceIndex" class="w-[220px]">
@@ -107,7 +107,7 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleAdmonition.vue'
 import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
 import Combobox from '#ui/components/base/Combobox.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import ShareModal from '#ui/components/modal/ShareModal.vue'
 import { injectModrinthClient } from '#ui/providers'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
index b8df546ea5..453bea7675 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -264,7 +264,7 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectFilePicker } from '#ui/providers'
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
index 67a81e69eb..62625331ab 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
@@ -15,7 +15,7 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import {
diff --git a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
index a3b8563355..0810a491da 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
@@ -295,7 +295,7 @@ import { computed, ref, toRef } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import VersionChannelIndicator from '#ui/components/version/VersionChannelIndicator.vue'
diff --git a/packages/ui/src/layouts/shared/content-tab/layout.vue b/packages/ui/src/layouts/shared/content-tab/layout.vue
index ffd3477d28..cdcab85496 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -23,7 +23,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -721,7 +721,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 								type="text"
 								autocomplete="off"
 								:spellcheck="false"
-								input-class="!h-10"
+								size="medium"
 								wrapper-class="flex-1 min-w-0"
 								clearable
 								:placeholder="
diff --git a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
index 7f245fa7e3..c8d1f731eb 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -11,8 +11,7 @@
 				name="search"
 				autocomplete="off"
 				:placeholder="formatMessage(messages.searchFiles)"
-				class="!h-10"
-				input-class="!h-10"
+				size="medium"
 				wrapper-class="flex-1 min-w-0"
 				@update:model-value="$emit('update:searchQuery', $event)"
 			/>
@@ -105,8 +104,8 @@
 					name="search"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.searchFiles)"
-					class="!h-10 hidden @[800px]:inline-flex"
-					input-class="!h-10"
+					class="hidden @[800px]:inline-flex"
+					size="medium"
 					wrapper-class="w-full sm:w-[280px]"
 					@update:model-value="$emit('update:searchQuery', $event)"
 				/>
@@ -228,7 +227,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 
diff --git a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
index 1e28ffbbb7..2b4ed147f9 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
@@ -122,7 +122,7 @@ import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XIcon } from '@modrin
 import { nextTick, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 
 const props = defineProps<{
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
index deaf3828b0..ab4289a76f 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -54,7 +54,7 @@ import { PlusIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
index 37a36e298c..43c7a1f3fd 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -51,7 +51,7 @@ import { RightArrowIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
index 44cbdbe545..1dfffa5217 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -35,7 +35,7 @@ import { EditIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
diff --git a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
index 423635d6e8..85e6e44d9c 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -106,7 +106,7 @@ import {
 import { computed, nextTick, ref } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectModrinthClient } from '#ui/providers/api-client'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
index 133342ce11..8cb4759601 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -124,11 +124,10 @@
 						</ButtonStyled>
 					</div>
 					<div class="relative">
-						<StyledInput
+						<StyledTextarea
 							id="startup-command-field"
 							v-model="startupCommand"
 							v-tooltip="advancedActionTooltip"
-							multiline
 							resize="vertical"
 							input-class="font-mono field-sizing-content"
 							:disabled="isStartupLoading || !canUseAdvancedSettings"
@@ -229,7 +228,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { ButtonStyled, Combobox, StyledInput } from '#ui/components'
+import { ButtonStyled, Combobox, StyledTextarea } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
index 96cc63944a..3e30bfac89 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/[id]/access/access.vue
@@ -6,7 +6,7 @@
 				:icon="SearchIcon"
 				:placeholder="formatMessage(messages.searchUsersPlaceholder, { count: members.length })"
 				wrapper-class="min-w-0 flex-1"
-				input-class="!h-10"
+				size="medium"
 				clearable
 			/>
 			<div class="flex shrink-0 items-center gap-2 flex-wrap md:flex-nowrap">
@@ -116,7 +116,7 @@ import { computed, ref, watch } from 'vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
 import DropdownFilterBar from '#ui/components/base/DropdownFilterBar.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import StyledInput from '#ui/components/base/inputs/StyledInput.vue'
 import {
 	AccessTable,
 	apiPermissionsToAccessRole,
diff --git a/packages/ui/src/stories/base/DatePicker.stories.ts b/packages/ui/src/stories/base/DatePicker.stories.ts
index c224c4283b..01fde86d92 100644
--- a/packages/ui/src/stories/base/DatePicker.stories.ts
+++ b/packages/ui/src/stories/base/DatePicker.stories.ts
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { computed, nextTick, onMounted, ref } from 'vue'
 
-import DatePicker from '../../components/base/DatePicker.vue'
+import DatePicker from '../../components/base/inputs/DatePicker.vue'
 
 const meta = {
 	title: 'Base/DatePicker',
diff --git a/packages/ui/src/stories/base/NativeDateInput.stories.ts b/packages/ui/src/stories/base/NativeDateInput.stories.ts
new file mode 100644
index 0000000000..f5e6b78b16
--- /dev/null
+++ b/packages/ui/src/stories/base/NativeDateInput.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import NativeDateInput from '../../components/base/inputs/NativeDateInput.vue'
+
+const meta = {
+	title: 'Base/NativeDateInput',
+	component: NativeDateInput,
+} satisfies Meta<typeof NativeDateInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Date: Story = {
+	args: {
+		type: 'date',
+	},
+}
+
+export const DatetimeLocal: Story = {
+	args: {
+		type: 'datetime-local',
+	},
+}
+
+export const Clearable: Story = {
+	render: () => ({
+		components: { NativeDateInput },
+		setup() {
+			const value = ref('2026-07-15')
+			return { value }
+		},
+		template: '<NativeDateInput v-model="value" clearable />',
+	}),
+}
+
+export const Error: Story = {
+	args: {
+		error: true,
+	},
+}
diff --git a/packages/ui/src/stories/base/StyledInput.stories.ts b/packages/ui/src/stories/base/StyledInput.stories.ts
index fa5b6340e3..9018142366 100644
--- a/packages/ui/src/stories/base/StyledInput.stories.ts
+++ b/packages/ui/src/stories/base/StyledInput.stories.ts
@@ -2,7 +2,7 @@ import { KeyIcon, LinkIcon, MailIcon, SearchIcon, UserIcon } from '@modrinth/ass
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { ref } from 'vue'
 
-import StyledInput from '../../components/base/StyledInput.vue'
+import StyledInput from '../../components/base/inputs/StyledInput.vue'
 
 const meta = {
 	title: 'Base/StyledInput',
@@ -10,15 +10,11 @@ const meta = {
 	argTypes: {
 		size: {
 			control: 'select',
-			options: ['standard', 'small'],
+			options: ['small', 'standard', 'medium', 'large'],
 		},
 		type: {
 			control: 'select',
-			options: ['text', 'email', 'password', 'number', 'url', 'search', 'date', 'datetime-local'],
-		},
-		resize: {
-			control: 'select',
-			options: ['none', 'vertical', 'both'],
+			options: ['text', 'email', 'password', 'number', 'url', 'search'],
 		},
 	},
 } satisfies Meta<typeof StyledInput>
@@ -102,18 +98,6 @@ export const Search: Story = {
 	},
 }
 
-export const Date: Story = {
-	args: {
-		type: 'date',
-	},
-}
-
-export const DatetimeLocal: Story = {
-	args: {
-		type: 'datetime-local',
-	},
-}
-
 export const Small: Story = {
 	args: {
 		icon: SearchIcon,
@@ -191,127 +175,20 @@ export const AllSizes: StoryObj = {
 						size="small"
 					/>
 				</div>
-			</div>
-		`,
-	}),
-}
-
-export const Multiline: Story = {
-	args: {
-		multiline: true,
-		placeholder: 'Enter a description...',
-	},
-}
-
-export const MultilineWithRows: Story = {
-	render: () => ({
-		components: { StyledInput },
-		setup() {
-			const value = ref('This textarea has 5 rows configured for longer content entry.')
-			return { value }
-		},
-		template: `
-			<StyledInput
-				v-model="value"
-				multiline
-				:rows="5"
-				placeholder="Enter details..."
-			/>
-		`,
-	}),
-}
-
-export const MultilineResizable: Story = {
-	args: {
-		multiline: true,
-		resize: 'vertical',
-		placeholder: 'Drag the bottom-right corner to resize...',
-	},
-}
-
-export const MultilineError: Story = {
-	render: () => ({
-		components: { StyledInput },
-		setup() {
-			const value = ref('Invalid content')
-			return { value }
-		},
-		template: `
-			<StyledInput
-				v-model="value"
-				multiline
-				placeholder="Enter text..."
-				error
-			/>
-		`,
-	}),
-}
-
-export const MultilineDisabled: Story = {
-	args: {
-		multiline: true,
-		placeholder: 'Disabled textarea',
-		disabled: true,
-	},
-}
-
-export const MultilineAllStates: StoryObj = {
-	render: () => ({
-		components: { StyledInput },
-		setup() {
-			const normalValue = ref('')
-			const filledValue = ref('Some content that has been entered into the textarea.')
-			const errorValue = ref('Invalid content')
-			const readonlyValue = ref('This content is readonly')
-			return { normalValue, filledValue, errorValue, readonlyValue }
-		},
-		template: /*html*/ `
-			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 400px;">
-				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">Default</p>
-					<StyledInput
-						v-model="normalValue"
-						multiline
-						placeholder="Enter text..."
-					/>
-				</div>
 				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">With Value</p>
+					<p style="margin-bottom: 0.5rem; font-weight: 600;">Medium (40px)</p>
 					<StyledInput
-						v-model="filledValue"
-						multiline
-					/>
-				</div>
-				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">Error State</p>
-					<StyledInput
-						v-model="errorValue"
-						multiline
-						error
-					/>
-				</div>
-				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">Disabled</p>
-					<StyledInput
-						multiline
-						placeholder="Disabled..."
-						disabled
-					/>
-				</div>
-				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">Readonly</p>
-					<StyledInput
-						v-model="readonlyValue"
-						multiline
-						readonly
+						:icon="SearchIcon"
+						placeholder="Medium size..."
+						size="medium"
 					/>
 				</div>
 				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">Resizable (vertical)</p>
+					<p style="margin-bottom: 0.5rem; font-weight: 600;">Large (48px)</p>
 					<StyledInput
-						multiline
-						resize="vertical"
-						placeholder="Drag to resize..."
+						:icon="SearchIcon"
+						placeholder="Large size..."
+						size="large"
 					/>
 				</div>
 			</div>
diff --git a/packages/ui/src/stories/base/StyledTextarea.stories.ts b/packages/ui/src/stories/base/StyledTextarea.stories.ts
new file mode 100644
index 0000000000..e7d5c30743
--- /dev/null
+++ b/packages/ui/src/stories/base/StyledTextarea.stories.ts
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import StyledTextarea from '../../components/base/inputs/StyledTextarea.vue'
+
+const meta = {
+	title: 'Base/StyledTextarea',
+	component: StyledTextarea,
+	argTypes: {
+		resize: {
+			control: 'select',
+			options: ['none', 'vertical', 'both'],
+		},
+	},
+} satisfies Meta<typeof StyledTextarea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		placeholder: 'Enter a description...',
+	},
+}
+
+export const WithRows: Story = {
+	args: {
+		rows: 5,
+		placeholder: 'Enter details...',
+	},
+}
+
+export const Resizable: Story = {
+	args: {
+		resize: 'vertical',
+		placeholder: 'Drag the bottom-right corner to resize...',
+	},
+}
+
+export const AllStates: StoryObj = {
+	render: () => ({
+		components: { StyledTextarea },
+		setup() {
+			const normalValue = ref('')
+			const filledValue = ref('Some content that has been entered into the textarea.')
+			const errorValue = ref('Invalid content')
+			const readonlyValue = ref('This content is readonly')
+			return { normalValue, filledValue, errorValue, readonlyValue }
+		},
+		template: /*html*/ `
+			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 400px;">
+				<StyledTextarea v-model="normalValue" placeholder="Enter text..." />
+				<StyledTextarea v-model="filledValue" />
+				<StyledTextarea v-model="errorValue" error />
+				<StyledTextarea placeholder="Disabled..." disabled />
+				<StyledTextarea v-model="readonlyValue" readonly />
+				<StyledTextarea resize="vertical" placeholder="Drag to resize..." />
+			</div>
+		`,
+	}),
+}