diff --git a/apps/app-frontend/src/components/ui/ExportModal.vue b/apps/app-frontend/src/components/ui/ExportModal.vue
index d0cdd1410b..66e76126a2 100644
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -7,8 +7,9 @@ import {
 	FileTreeSelect,
 	injectNotificationManager,
 	injectPopupNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { save } from '@tauri-apps/plugin-dialog'
@@ -194,7 +195,7 @@ function normalizeExportPath(path) {
 			<div class="grid grid-cols-2 gap-4">
 				<div class="labeled_input w-full">
 					<p class="text-contrast font-semibold">{{ formatMessage(messages.modpackNameLabel) }}</p>
-					<StyledInput
+					<Input
 						v-model="nameInput"
 						type="text"
 						:placeholder="formatMessage(messages.modpackNamePlaceholder)"
@@ -206,7 +207,7 @@ function normalizeExportPath(path) {
 					<p class="text-contrast font-semibold">
 						{{ formatMessage(messages.versionNumberLabel) }}
 					</p>
-					<StyledInput
+					<Input
 						v-model="versionInput"
 						type="text"
 						:placeholder="formatMessage(messages.versionNumberPlaceholder)"
@@ -219,9 +220,8 @@ function normalizeExportPath(path) {
 				<p class="m-0 text-contrast font-semibold">
 					{{ formatMessage(commonMessages.descriptionLabel) }}
 				</p>
-				<StyledInput
+				<Textarea
 					v-model="exportDescription"
-					multiline
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
 					wrapper-class="w-full"
 				/>
diff --git a/apps/app-frontend/src/components/ui/JavaSelector.vue b/apps/app-frontend/src/components/ui/JavaSelector.vue
index a46f4347b1..ff0631397e 100644
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -2,7 +2,7 @@
 	<JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
 	<div :id="props.id" class="toggle-setting" :class="{ compact }">
 		<div class="input-with-status">
-			<StyledInput
+			<Input
 				autocomplete="off"
 				:disabled="props.disabled"
 				:model-value="props.modelValue ? props.modelValue.path : ''"
@@ -98,13 +98,7 @@ import {
 	SpinnerIcon,
 	XCircleIcon,
 } from '@modrinth/assets'
-import {
-	Button,
-	defineMessages,
-	injectNotificationManager,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Button, defineMessages, injectNotificationManager, Input, useVIntl } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
 import { ref, watch } from 'vue'
 
diff --git a/apps/app-frontend/src/components/ui/friends/FriendsList.vue b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
index 7294781e87..b5c281e81a 100644
--- a/apps/app-frontend/src/components/ui/friends/FriendsList.vue
+++ b/apps/app-frontend/src/components/ui/friends/FriendsList.vue
@@ -6,8 +6,8 @@ import {
 	defineMessages,
 	IconButton,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
-	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
@@ -250,7 +250,7 @@ const messages = defineMessages({
 				{{ formatMessage(messages.usernameDescription) }}
 			</p>
 			<div class="flex items-center gap-2 mt-4">
-				<StyledInput
+				<Input
 					v-model="username"
 					:icon="UserIcon"
 					type="text"
@@ -280,7 +280,7 @@ const messages = defineMessages({
 			>
 				<UserPlusIcon />
 			</IconButton>
-			<StyledInput
+			<Input
 				v-model="search"
 				:icon="SearchIcon"
 				type="text"
diff --git a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
index b61ea81cbc..e9992f331a 100644
--- a/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
+++ b/apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue
@@ -6,7 +6,7 @@ import {
 	Button,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
@@ -103,7 +103,7 @@ async function addServer(instance) {
 	<ModalWrapper ref="modal" :header="formatMessage(messages.title)">
 		<div class="flex flex-col gap-4 min-w-[350px]">
 			<Admonition type="warning" :body="formatMessage(messages.compatibilityWarning)" />
-			<StyledInput
+			<Input
 				v-model="searchFilter"
 				:icon="SearchIcon"
 				type="search"
diff --git a/apps/app-frontend/src/components/ui/library/group-instances-modal.vue b/apps/app-frontend/src/components/ui/library/group-instances-modal.vue
index fada83123c..d5d3f86df6 100644
--- a/apps/app-frontend/src/components/ui/library/group-instances-modal.vue
+++ b/apps/app-frontend/src/components/ui/library/group-instances-modal.vue
@@ -23,7 +23,7 @@
 
 		<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 py-4">
 			<div class="px-6">
-				<StyledInput
+				<Input
 					v-model="groupInstancesSearch"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchPlaceholder)"
@@ -96,8 +96,8 @@ import {
 	Button,
 	commonMessages,
 	defineMessages,
+	Input,
 	NewModal,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref, watch } from 'vue'
diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue
index e18d06e22d..878216b23f 100644
--- a/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue
+++ b/apps/app-frontend/src/components/ui/library/library-toolbar/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PlusIcon, SearchIcon, SquarePlusIcon } from '@modrinth/assets'
-import { Button, defineMessages, StyledInput, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, Input, useVIntl } from '@modrinth/ui'
 import { computed, inject } from 'vue'
 
 import FilterMenu from '@/components/ui/library/library-toolbar/filter-menu.vue'
@@ -29,7 +29,7 @@ function openNewGroup() {
 <template>
 	<div class="flex flex-col gap-2">
 		<div class="flex flex-wrap gap-2">
-			<StyledInput
+			<Input
 				v-model="search"
 				:icon="SearchIcon"
 				type="text"
diff --git a/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue b/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue
index 37946eb785..41c4eff743 100644
--- a/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue
+++ b/apps/app-frontend/src/components/ui/library/library-toolbar/new-group-modal.vue
@@ -18,7 +18,7 @@
 			<label for="new-group-name" class="font-semibold text-contrast">
 				{{ formatMessage(messages.groupName) }}
 			</label>
-			<StyledInput
+			<Input
 				id="new-group-name"
 				ref="groupNameInput"
 				v-model="newGroupName"
@@ -32,7 +32,7 @@
 
 		<div class="flex h-[400px] flex-col gap-3 overflow-y-auto bg-surface-2 py-4">
 			<div class="px-6">
-				<StyledInput
+				<Input
 					v-model="newGroupSearch"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchInstance)"
@@ -103,15 +103,7 @@
 
 <script setup lang="ts">
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import {
-	Avatar,
-	Button,
-	defineMessages,
-	NewModal,
-	StyledInput,
-	TagItem,
-	useVIntl,
-} from '@modrinth/ui'
+import { Avatar, Button, defineMessages, Input, NewModal, TagItem, useVIntl } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { useLibrary } from '@/components/ui/library/use-library'
@@ -157,7 +149,7 @@ const {
 } = useLibrary()
 
 const modal = ref<InstanceType<typeof NewModal>>()
-const groupNameInput = ref<InstanceType<typeof StyledInput>>()
+const groupNameInput = ref<InstanceType<typeof Input>>()
 const groupNamesById = computed(
 	() => new Map(libraryGroups.value.map((group) => [group.id, group.name])),
 )
diff --git a/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
index e8b39a6def..ebe9e9af7b 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue
@@ -2,8 +2,8 @@
 import {
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	Slider,
-	StyledInput,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -204,7 +204,7 @@ watch(
 					</p>
 				</div>
 
-				<StyledInput
+				<Input
 					id="width"
 					v-model="settings.game_resolution[0]"
 					:disabled="settings.force_fullscreen"
@@ -224,7 +224,7 @@ watch(
 					</p>
 				</div>
 
-				<StyledInput
+				<Input
 					id="height"
 					v-model="settings.game_resolution[1]"
 					:disabled="settings.force_fullscreen"
@@ -261,7 +261,7 @@ watch(
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.javaArgumentsTitle) }}
 				</h2>
-				<StyledInput
+				<Input
 					id="java-args"
 					v-model="settings.launchArgs"
 					autocomplete="off"
@@ -278,7 +278,7 @@ watch(
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.environmentVariablesTitle) }}
 				</h2>
-				<StyledInput
+				<Input
 					id="env-vars"
 					v-model="settings.envVars"
 					autocomplete="off"
@@ -299,7 +299,7 @@ watch(
 				<h3 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.preLaunchHookTitle) }}
 				</h3>
-				<StyledInput
+				<Input
 					id="pre-launch"
 					v-model="settings.hooks.pre_launch"
 					autocomplete="off"
@@ -316,7 +316,7 @@ watch(
 				<h3 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.wrapperHookTitle) }}
 				</h3>
-				<StyledInput
+				<Input
 					id="wrapper"
 					v-model="settings.hooks.wrapper"
 					autocomplete="off"
@@ -333,7 +333,7 @@ watch(
 				<h3 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.postExitHookTitle) }}
 				</h3>
-				<StyledInput
+				<Input
 					id="post-exit"
 					v-model="settings.hooks.post_exit"
 					autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
index 55d6404005..d19cd56d7f 100644
--- a/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
+++ b/apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue
@@ -5,8 +5,8 @@ import {
 	defineMessages,
 	IconButton,
 	injectNotificationManager,
+	Input,
 	Slider,
-	StyledInput,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -176,7 +176,7 @@ async function findLauncherDir() {
 			<h2 class="m-0 text-lg font-semibold text-contrast">
 				{{ formatMessage(messages.appDirectoryTitle) }}
 			</h2>
-			<StyledInput
+			<Input
 				id="appDir"
 				v-model="settings.custom_dir"
 				:icon="BoxIcon"
@@ -193,7 +193,7 @@ async function findLauncherDir() {
 						<FolderSearchIcon aria-hidden="true" />
 					</IconButton>
 				</template>
-			</StyledInput>
+			</Input>
 			<p class="m-0 leading-tight text-secondary">
 				{{ formatMessage(messages.appDirectoryDescription) }}
 			</p>
diff --git a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
index 5a518b5dbd..e4b639175b 100644
--- a/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue
@@ -6,7 +6,7 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
@@ -104,7 +104,7 @@ const messages = defineMessages({
 			<h2 class="text-lg font-extrabold text-contrast mt-0 mb-1">
 				{{ formatMessage(messages.name) }}
 			</h2>
-			<StyledInput
+			<Input
 				v-model="name"
 				:placeholder="formatMessage(messages.placeholderName)"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
index d1603da948..95e866a865 100644
--- a/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
+++ b/apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-	Combobox,
-	defineMessages,
-	type MessageDescriptor,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Combobox, defineMessages, Input, type MessageDescriptor, useVIntl } from '@modrinth/ui'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
 
@@ -65,7 +59,7 @@ defineExpose({ resourcePackOptions })
 	<div class="space-y-4 w-full">
 		<label class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.name) }}</span>
-			<StyledInput
+			<Input
 				v-model="name"
 				:placeholder="formatMessage(messages.placeholderName)"
 				autocomplete="off"
@@ -74,7 +68,7 @@ defineExpose({ resourcePackOptions })
 		</label>
 		<label class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.address) }}</span>
-			<StyledInput
+			<Input
 				v-model="address"
 				:placeholder="formatMessage(messages.placeholderAddress)"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
index 18309fc6bd..d281118b0a 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue
@@ -13,7 +13,7 @@ import {
 	Chips,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
@@ -367,7 +367,7 @@ const messages = defineMessages({
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
-			<StyledInput
+			<Input
 				id="instance-name"
 				v-model="title"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
index 86e08ba3a8..3c01318362 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue
@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-	Checkbox,
-	defineMessages,
-	injectNotificationManager,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Checkbox, defineMessages, injectNotificationManager, Input, useVIntl } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'
@@ -149,7 +143,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
@@ -164,7 +158,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
@@ -179,7 +173,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
index 3c1786ac06..cfaab9e877 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue
@@ -13,8 +13,8 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	Slider,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
@@ -208,7 +208,7 @@ const messages = defineMessages({
 						>Java {{ optimalJava?.parsed_version }}</span
 					>
 					<div class="flex gap-2 items-center">
-						<StyledInput
+						<Input
 							:model-value="activePath"
 							:disabled="!overrideJavaInstall"
 							autocomplete="off"
@@ -301,7 +301,7 @@ const messages = defineMessages({
 			:label="formatMessage(messages.customJavaArguments)"
 			class="my-2"
 		/>
-		<StyledInput
+		<Input
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
@@ -317,7 +317,7 @@ const messages = defineMessages({
 			:label="formatMessage(messages.customEnvironmentVariables)"
 			class="mb-2"
 		/>
-		<StyledInput
+		<Input
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"
diff --git a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
index 5e6a662366..f1a8890596 100644
--- a/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
+++ b/apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue
@@ -3,7 +3,7 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -129,7 +129,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<StyledInput
+			<Input
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -148,7 +148,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.heightDescription) }}
 				</p>
 			</div>
-			<StyledInput
+			<Input
 				id="height"
 				v-model="resolution[1]"
 				autocomplete="off"
diff --git a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
index fb35a9457a..8c0c4126c3 100644
--- a/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
+++ b/apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-4">
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="search"
 					:icon="SearchIcon"
 					:placeholder="`Search ${rows.length} users...`"
@@ -151,8 +151,8 @@ import {
 	AutoLink,
 	Avatar,
 	defineMessages,
+	Input,
 	type SortDirection,
-	StyledInput,
 	Table,
 	type TableColumn,
 	truncatedTooltip,
diff --git a/apps/app-frontend/src/pages/instance/worlds/index.vue b/apps/app-frontend/src/pages/instance/worlds/index.vue
index b4b9583f73..18cd38b8cd 100644
--- a/apps/app-frontend/src/pages/instance/worlds/index.vue
+++ b/apps/app-frontend/src/pages/instance/worlds/index.vue
@@ -21,7 +21,7 @@
 	<ReadyTransition :pending="worldsReadyPending">
 		<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
 			<div class="flex flex-wrap items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="searchFilter"
 					:icon="SearchIcon"
 					type="text"
@@ -141,8 +141,8 @@ import {
 	GAME_MODES,
 	type GameVersion,
 	injectNotificationManager,
+	Input,
 	ReadyTransition,
-	StyledInput,
 	useReadyState,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
index fd26b3c292..2beb4b684c 100644
--- a/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
+++ b/apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue
@@ -23,7 +23,7 @@
 					</div>
 
 					<div class="flex w-full flex-wrap items-center gap-2 md:w-auto">
-						<StyledInput
+						<Input
 							v-model="searchQuery"
 							:icon="SearchIcon"
 							:placeholder="formatMessage(analyticsTableMessages.searchPlaceholder)"
@@ -192,9 +192,9 @@
 import { DownloadIcon, DropdownIcon, SearchIcon, UserIcon } from '@modrinth/assets'
 import { TeleportOverflowMenu } from '@modrinth/ui'
 import {
+	Input,
 	type OverflowMenuOption,
 	Pagination,
-	StyledInput,
 	Table,
 	useFormatNumber,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
index 606be33b05..fa9d3a41b0 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue
@@ -48,7 +48,7 @@
 					To confirm this transfer, type
 					<span class="font-bold text-contrast">{{ organization.name }}</span> below
 				</p>
-				<StyledInput
+				<Input
 					v-model="confirmationText"
 					:placeholder="`Enter ${organization.name}`"
 					wrapper-class="w-full"
@@ -72,7 +72,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, Button, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, Button, Input, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
index 47806997c1..d4d3d232ba 100644
--- a/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
+++ b/apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue
@@ -55,7 +55,7 @@
 					To confirm this transfer, type
 					<span class="font-bold text-contrast">{{ project.name }}</span> below
 				</p>
-				<StyledInput
+				<Input
 					v-model="confirmationText"
 					:placeholder="`Enter ${project.name}`"
 					wrapper-class="w-full"
@@ -79,7 +79,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, Button, NewModal, StyledInput } from '@modrinth/ui'
+import { Admonition, Avatar, Button, Input, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
diff --git a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
index d78f38c4fd..9d9329ab52 100644
--- a/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
+++ b/apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue
@@ -15,7 +15,7 @@
 			<BookmarkIcon aria-hidden="true" :fill="saved ? 'currentColor' : 'none'" />
 		</template>
 		<template #panel>
-			<StyledInput
+			<Input
 				v-model="displayCollectionsSearch"
 				:placeholder="formatMessage(commonMessages.searchPlaceholder)"
 				wrapper-class="menu-search"
@@ -60,7 +60,7 @@ import {
 	ButtonLink,
 	Checkbox,
 	commonMessages,
-	StyledInput,
+	Input,
 	TeleportPopoutMenu,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
index 32bbb6d6f6..0cf8954d82 100644
--- a/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/admin/AssignNoticeModal.vue
@@ -6,9 +6,9 @@ import {
 	Button,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
 	ServerNotice,
-	StyledInput,
 	TagItem,
 } from '@modrinth/ui'
 import { ref } from 'vue'
@@ -175,7 +175,7 @@ defineExpose({ show, hide })
 					<span v-else class="mb-2"> No nodes assigned yet </span>
 				</div>
 				<div class="flex w-[45rem] items-center gap-2">
-					<StyledInput
+					<Input
 						id="server-assign-field"
 						v-model="inputField"
 						wrapper-class="w-full"
diff --git a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
index 45f3941547..b4b826288b 100644
--- a/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
+++ b/apps/frontend/src/components/ui/admin/BatchCreditModal.vue
@@ -20,7 +20,7 @@
 				<label for="days" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast"> Days to credit </span>
 				</label>
-				<StyledInput
+				<Input
 					id="days"
 					v-model="days"
 					wrapper-class="w-32"
@@ -36,12 +36,7 @@
 						<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
 					</label>
 					<div class="flex items-center gap-2">
-						<StyledInput
-							id="node-input"
-							v-model="nodeInput"
-							wrapper-class="w-32"
-							autocomplete="off"
-						/>
+						<Input id="node-input" v-model="nodeInput" wrapper-class="w-32" autocomplete="off" />
 						<Button
 							type="quiet"
 							color="blue"
@@ -95,13 +90,7 @@
 					class="text-muted flex flex-col gap-2 rounded-lg border border-surface-5 bg-button-bg p-4"
 				>
 					<span>Hi {user.name},</span>
-					<StyledInput
-						id="message-batch"
-						v-model="message"
-						multiline
-						:rows="3"
-						input-class="!bg-surface-3"
-					/>
+					<Textarea id="message-batch" v-model="message" :rows="3" input-class="!bg-surface-3" />
 					<span>
 						To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
 						Servers subscription.
@@ -134,9 +123,10 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
 	TagItem,
+	Textarea,
 	Toggle,
 } from '@modrinth/ui'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
diff --git a/apps/frontend/src/components/ui/admin/TransferModal.vue b/apps/frontend/src/components/ui/admin/TransferModal.vue
index 16e0df6de7..6227de5064 100644
--- a/apps/frontend/src/components/ui/admin/TransferModal.vue
+++ b/apps/frontend/src/components/ui/admin/TransferModal.vue
@@ -25,10 +25,9 @@
 					</span>
 					<span>Server IDs (one per line or comma-separated.)</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="server-ids"
 					v-model="serverIdsInput"
-					multiline
 					:rows="4"
 					input-class="bg-surface-3"
 					placeholder="123e4569-e89b-12d3-a456-426614174005&#10;123e9569-e89b-12d3-a456-413678919876"
@@ -48,7 +47,7 @@
 						<span>Add nodes to transfer (comma or space-separated).</span>
 					</label>
 					<div class="flex items-center gap-2">
-						<StyledInput
+						<Input
 							id="node-input"
 							v-model="nodeInput"
 							wrapper-class="w-64"
@@ -89,7 +88,7 @@
 						<span class="text-lg font-semibold text-contrast">Tag transferred nodes</span>
 						<span>Optional tag to add to the transferred nodes.</span>
 					</label>
-					<StyledInput
+					<Input
 						id="tag-nodes"
 						v-model="tagNodes"
 						wrapper-class="max-w-[12rem]"
@@ -117,7 +116,7 @@
 					<span>Optional preferred node tags for node selection.</span>
 				</label>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="tag-input"
 						v-model="tagInput"
 						wrapper-class="w-40"
@@ -153,7 +152,7 @@
 					:format-label="(item) => scheduleOptionLabels[item]"
 					:capitalize="false"
 				/>
-				<StyledInput
+				<DateInput
 					v-if="scheduleOption === 'later'"
 					v-model="scheduledDate"
 					type="datetime-local"
@@ -170,10 +169,9 @@
 					</span>
 					<span>Provide a reason for this transfer batch.</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="reason"
 					v-model="reason"
-					multiline
 					:rows="2"
 					input-class="bg-surface-3"
 					placeholder="Node maintenance scheduled"
@@ -205,11 +203,13 @@ import {
 	Button,
 	Chips,
 	Combobox,
+	DateInput,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
 	TagItem,
+	Textarea,
 	Toggle,
 } from '@modrinth/ui'
 import dayjs from 'dayjs'
diff --git a/apps/frontend/src/components/ui/auth/CreateAccount.vue b/apps/frontend/src/components/ui/auth/CreateAccount.vue
index 9382e20e94..013a469afe 100644
--- a/apps/frontend/src/components/ui/auth/CreateAccount.vue
+++ b/apps/frontend/src/components/ui/auth/CreateAccount.vue
@@ -45,7 +45,7 @@
 			<label class="text-md font-semibold text-contrast" for="create-account-username">
 				{{ formatMessage(messages.usernameOptionalLabel) }}
 			</label>
-			<StyledInput
+			<Input
 				id="create-account-username"
 				v-model="usernameModel"
 				type="text"
@@ -106,7 +106,7 @@ import {
 	DatePicker,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/auth/PasskeySettings.vue b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
index 7156128fad..67efd2ba12 100644
--- a/apps/frontend/src/components/ui/auth/PasskeySettings.vue
+++ b/apps/frontend/src/components/ui/auth/PasskeySettings.vue
@@ -105,7 +105,7 @@
 					<div class="text-md font-semibold text-contrast">
 						{{ formatMessage(messages.passkeyNameLabel) }}
 					</div>
-					<StyledInput
+					<Input
 						id="passkey-name"
 						v-model="pendingPasskeyName"
 						:maxlength="255"
@@ -145,7 +145,7 @@
 					<div class="text-md font-semibold text-contrast">
 						{{ formatMessage(messages.passkeyNameLabel) }}
 					</div>
-					<StyledInput
+					<Input
 						id="passkey-rename"
 						v-model="passkeyToRenameName"
 						:maxlength="255"
@@ -210,8 +210,8 @@ import {
 	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/auth/SignIn.vue b/apps/frontend/src/components/ui/auth/SignIn.vue
index fd695e72f3..ed5d8434ed 100644
--- a/apps/frontend/src/components/ui/auth/SignIn.vue
+++ b/apps/frontend/src/components/ui/auth/SignIn.vue
@@ -29,7 +29,7 @@
 							{{ formatMessage(messages.twoFactorCodeLabelDescription) }}
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						id="two-factor-code"
 						v-model="twoFactorCodeModel"
 						:maxlength="11"
@@ -91,7 +91,7 @@
 
 				<section class="mx-auto flex w-full flex-col gap-2.5">
 					<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
-					<StyledInput
+					<Input
 						id="email"
 						v-model="emailModel"
 						:icon="MailIcon"
@@ -103,7 +103,7 @@
 					/>
 
 					<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-					<StyledInput
+					<Input
 						id="password"
 						v-model="passwordModel"
 						:icon="KeyIcon"
@@ -169,14 +169,7 @@ import {
 	SteamColorIcon,
 	UserKeyIcon,
 } from '@modrinth/assets'
-import {
-	Button,
-	ButtonLink,
-	commonMessages,
-	defineMessages,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Button, ButtonLink, commonMessages, defineMessages, Input, useVIntl } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
 import { computed } from 'vue'
 import type { LocationQuery } from 'vue-router'
diff --git a/apps/frontend/src/components/ui/auth/SignUp.vue b/apps/frontend/src/components/ui/auth/SignUp.vue
index 4ecbf17341..0c5d2dc147 100644
--- a/apps/frontend/src/components/ui/auth/SignUp.vue
+++ b/apps/frontend/src/components/ui/auth/SignUp.vue
@@ -66,7 +66,7 @@
 
 		<section class="flex flex-col gap-2.5">
 			<label for="email" hidden>{{ formatMessage(commonMessages.emailLabel) }}</label>
-			<StyledInput
+			<Input
 				id="email"
 				v-model="emailModel"
 				:icon="MailIcon"
@@ -77,7 +77,7 @@
 			/>
 
 			<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-			<StyledInput
+			<Input
 				id="password"
 				v-model="passwordModel"
 				:icon="KeyIcon"
@@ -145,8 +145,8 @@ import {
 	ButtonLink,
 	commonMessages,
 	defineMessages,
+	Input,
 	IntlFormatted,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
index 31383eb25e..aca16652ef 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
@@ -13,7 +13,7 @@
 				size="small"
 			/>
 		</div>
-		<StyledInput
+		<Input
 			v-model="searchQuery"
 			:icon="SearchIcon"
 			type="text"
@@ -92,7 +92,7 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
-import { Button, Chips, StyledInput } from '@modrinth/ui'
+import { Button, Chips, Input } from '@modrinth/ui'
 import { useMagicKeys } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index 7774b371e4..8800b4bc06 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -24,7 +24,7 @@
 			<span class="font-semibold text-contrast">
 				{{ formatMessage(messages.versionNumber) }} <span class="text-red">*</span>
 			</span>
-			<StyledInput
+			<Input
 				id="version-number"
 				v-model="draftVersion.version_number"
 				:disabled="isUploading"
@@ -36,7 +36,7 @@
 		</div>
 		<div class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.versionSubtitle) }}</span>
-			<StyledInput
+			<Input
 				id="version-number"
 				v-model="draftVersion.name"
 				:placeholder="formatMessage(messages.versionSubtitlePlaceholder)"
@@ -66,8 +66,8 @@
 import {
 	Chips,
 	defineMessages,
+	Input,
 	MarkdownEditor,
-	StyledInput,
 	Tabs,
 	type TabsTab,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
index 3904ad76c2..faa72c4e2a 100644
--- a/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/CollectionCreateModal.vue
@@ -9,7 +9,7 @@
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					id="name"
 					v-model="name"
 					:maxlength="64"
@@ -25,10 +25,9 @@
 					}}</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="additional-information"
 					v-model="description"
-					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -57,8 +56,9 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
index 44009fc4d8..02163439a1 100644
--- a/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/OrganizationCreateModal.vue
@@ -9,7 +9,7 @@
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					id="name"
 					v-model="name"
 					:maxlength="64"
@@ -28,7 +28,7 @@
 				</label>
 				<div class="text-input-wrapper">
 					<div class="text-input-wrapper__before">https://modrinth.com/organization/</div>
-					<StyledInput
+					<Input
 						id="slug"
 						v-model="slug"
 						:maxlength="64"
@@ -46,10 +46,9 @@
 					</span>
 					<span>{{ formatMessage(messages.summaryDescription) }}</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="additional-information"
 					v-model="description"
-					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -79,8 +78,9 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { ref } from 'vue'
diff --git a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
index 4bcd969178..42878864bb 100644
--- a/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
+++ b/apps/frontend/src/components/ui/create/ProjectCreateModal.vue
@@ -32,7 +32,7 @@
 						{{ formatMessage(messages.nameLabel) }}
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					id="name"
 					v-model="name"
 					:maxlength="64"
@@ -46,19 +46,18 @@
 				<span class="text-md font-semibold text-contrast">
 					{{ formatMessage(messages.urlLabel) }}
 				</span>
-				<div class="text-input-wrapper !w-full">
-					<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
-					<StyledInput
-						id="slug"
-						v-model="slug"
-						:maxlength="64"
-						class="w-full"
-						type="text"
-						autocomplete="off"
-						:disabled="hasHitLimit"
-						@update:model-value="manualSlug = true"
-					/>
-				</div>
+				<Input
+					id="slug"
+					v-model="slug"
+					:maxlength="64"
+					class="w-full"
+					type="text"
+					autocomplete="off"
+					:disabled="hasHitLimit"
+					@update:model-value="manualSlug = true"
+				>
+					<template #prefix>https://modrinth.com/project/</template>
+				</Input>
 			</label>
 			<div class="flex flex-col gap-2.5">
 				<label for="owner">
@@ -100,10 +99,9 @@
 						{{ formatMessage(messages.summaryLabel) }}
 					</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="additional-information"
 					v-model="description"
-					multiline
 					:maxlength="256"
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
@@ -142,8 +140,9 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { computed, defineAsyncComponent, h } from 'vue'
diff --git a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
index 73fe4f82eb..8feb4ac6bf 100644
--- a/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
+++ b/apps/frontend/src/components/ui/dashboard/RevenueInputField.vue
@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-2">
 		<div class="flex items-center gap-2">
 			<div class="relative flex-1">
-				<StyledInput
+				<Input
 					ref="amountInput"
 					:model-value="modelValue"
 					type="number"
@@ -12,7 +12,7 @@
 					:disabled="isDisabled"
 					:placeholder="formatMessage(formFieldPlaceholders.amountPlaceholder)"
 					wrapper-class="w-full"
-					@update:model-value="handleStyledInput"
+					@update:model-value="handleInput"
 				/>
 			</div>
 			<Combobox
@@ -52,7 +52,7 @@ import {
 	Combobox,
 	commonMessages,
 	formFieldPlaceholders,
-	StyledInput,
+	Input,
 	useFormatMoney,
 	useVIntl,
 } from '@modrinth/ui'
@@ -81,7 +81,7 @@ const emit = defineEmits<{
 
 const { formatMessage } = useVIntl()
 const formatMoney = useFormatMoney()
-const amountInput = ref<InstanceType<typeof StyledInput> | null>(null)
+const amountInput = ref<InstanceType<typeof Input> | null>(null)
 
 const safeMaxAmount = computed(() => {
 	return Math.max(0, props.maxAmount)
@@ -106,7 +106,7 @@ function setMaxAmount() {
 	emit('update:modelValue', maxValue)
 }
 
-function handleStyledInput(val: string | number) {
+function handleInput(val: string | number) {
 	const value = String(val)
 
 	if (value && value.includes('.')) {
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
index 31d1d3b089..af5814fbfd 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue
@@ -42,7 +42,7 @@
 				>
 			</label>
 			<div class="flex flex-row gap-2">
-				<StyledInput
+				<Input
 					v-model="venmoHandle"
 					:placeholder="formatMessage(messages.venmoHandlePlaceholder)"
 					wrapper-class="w-full"
@@ -112,9 +112,9 @@ import {
 	defineMessages,
 	financialMessages,
 	formFieldLabels,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
index e30bc9dc87..a469c608b5 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue
@@ -56,7 +56,7 @@
 			</span>
 			<div class="flex flex-col gap-3 sm:flex-row sm:gap-4">
 				<div class="flex flex-1 flex-col gap-2.5">
-					<StyledInput
+					<Input
 						v-model="formData.bankAccountOwnerFirstName"
 						:placeholder="formatMessage(formFieldPlaceholders.firstNamePlaceholder)"
 						autocomplete="given-name"
@@ -64,7 +64,7 @@
 					/>
 				</div>
 				<div class="flex flex-1 flex-col gap-2.5">
-					<StyledInput
+					<Input
 						v-model="formData.bankAccountOwnerLastName"
 						:placeholder="formatMessage(formFieldPlaceholders.lastNamePlaceholder)"
 						autocomplete="family-name"
@@ -91,7 +91,7 @@
 				class="h-10"
 			/>
 
-			<StyledInput
+			<Input
 				v-else
 				v-model="formData.bankName"
 				:placeholder="formatMessage(formFieldPlaceholders.bankNamePlaceholder)"
@@ -108,7 +108,7 @@
 				</span>
 			</label>
 
-			<StyledInput
+			<Input
 				v-if="['text', 'email', 'tel'].includes(field.type)"
 				v-model="formData[field.name]"
 				:type="field.type === 'tel' ? undefined : field.type === 'text' ? undefined : field.type"
@@ -158,7 +158,7 @@
 							<span v-if="dynamicDocumentNumberField.required" class="text-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						v-model="formData.documentNumber"
 						:placeholder="dynamicDocumentNumberField.placeholder"
 						autocomplete="off"
@@ -238,9 +238,9 @@ import {
 	getBlockchainIcon,
 	getCurrencyColor,
 	getCurrencyIcon,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
index 6ba3e30481..1532258371 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayKycStage.vue
@@ -32,7 +32,7 @@
 						<span class="text-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.businessName"
 					:placeholder="formatMessage(formFieldPlaceholders.businessNamePlaceholder)"
 					autocomplete="organization"
@@ -47,7 +47,7 @@
 						<span class="text-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.email"
 					type="email"
 					:placeholder="formatMessage(formFieldPlaceholders.emailPlaceholder)"
@@ -65,7 +65,7 @@
 								<span class="text-red">*</span>
 							</span>
 						</label>
-						<StyledInput
+						<Input
 							v-model="formData.firstName"
 							:placeholder="formatMessage(formFieldPlaceholders.firstNamePlaceholder)"
 							autocomplete="given-name"
@@ -79,7 +79,7 @@
 								<span class="text-red">*</span>
 							</span>
 						</label>
-						<StyledInput
+						<Input
 							v-model="formData.lastName"
 							:placeholder="formatMessage(formFieldPlaceholders.lastNamePlaceholder)"
 							autocomplete="family-name"
@@ -112,7 +112,7 @@
 						<span class="text-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.physicalAddress.address1"
 					:placeholder="formatMessage(formFieldPlaceholders.addressPlaceholder)"
 					autocomplete="address-line1"
@@ -126,7 +126,7 @@
 						{{ formatMessage(formFieldLabels.addressLine2) }}
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-model="formData.physicalAddress.address2"
 					:placeholder="formatMessage(formFieldPlaceholders.address2Placeholder)"
 					autocomplete="address-line2"
@@ -142,7 +142,7 @@
 							<span class="text-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						v-model="formData.physicalAddress.city"
 						:placeholder="formatMessage(formFieldPlaceholders.cityPlaceholder)"
 						autocomplete="address-level2"
@@ -164,7 +164,7 @@
 						searchable
 						:search-placeholder="formatMessage(messages.searchSubdivisionsPlaceholder)"
 					/>
-					<StyledInput
+					<Input
 						v-else
 						v-model="formData.physicalAddress.state"
 						:placeholder="formatMessage(formFieldPlaceholders.statePlaceholder)"
@@ -182,7 +182,7 @@
 							<span class="text-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						v-model="formData.physicalAddress.zip"
 						:placeholder="formatMessage(formFieldPlaceholders.postalCodePlaceholder)"
 						autocomplete="postal-code"
@@ -217,7 +217,7 @@ import {
 	defineMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 // TODO: Switch to using Muralpay's improved endpoint when it's available.
diff --git a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
index 764108e703..d5d5c5e1ee 100644
--- a/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
+++ b/apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue
@@ -39,7 +39,7 @@
 					>{{ formatMessage(formFieldLabels.email) }} <span class="text-red">*</span></span
 				>
 			</label>
-			<StyledInput
+			<Input
 				v-model="deliveryEmail"
 				type="email"
 				:placeholder="formatMessage(formFieldPlaceholders.emailPlaceholder)"
@@ -131,7 +131,7 @@
 
 			<div v-if="showGiftCardSelector && useFixedDenominations" class="flex flex-col gap-2.5">
 				<template v-if="useDenominationSuggestions">
-					<StyledInput
+					<Input
 						v-model="denominationSearchInput"
 						type="number"
 						:icon="SearchIcon"
@@ -321,10 +321,10 @@ import {
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
 	paymentMethodMessages,
-	StyledInput,
 	useDebugLogger,
 	useFormatMoney,
 	useVIntl,
diff --git a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
index cd38f1c50f..32230d2d45 100644
--- a/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
+++ b/apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<form class="flex flex-col gap-2 sm:flex-row" @submit.prevent="executeSearch">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -126,8 +126,8 @@ import {
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	Pagination,
-	StyledInput,
 } from '@modrinth/ui'
 
 import GlobalDetailLocalTraceCard from '~/components/ui/moderation/GlobalDetailLocalTraceCard.vue'
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
index e5790e3e84..e489941202 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue
@@ -249,10 +249,9 @@
 								:heading-buttons="false"
 								:on-image-upload="onUploadHandler"
 							/>
-							<StyledInput
+							<Textarea
 								v-else
 								v-model="messageText"
-								multiline
 								placeholder="No message generated."
 								autocomplete="off"
 								input-class="h-[400px] font-mono"
@@ -456,8 +455,8 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 	MarkdownEditor,
-	StyledInput,
 	TeleportOverflowMenu,
+	Textarea,
 	useDebugLogger,
 } from '@modrinth/ui'
 import type { ProjectStatus } from '@modrinth/utils'
diff --git a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
index f99e3a2b12..58cefda4d1 100644
--- a/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
+++ b/apps/frontend/src/components/ui/moderation/checklist/ModpackPermissionsFlow.vue
@@ -48,7 +48,7 @@
 					<label for="proof">
 						<span class="label__title">Proof</span>
 					</label>
-					<StyledInput
+					<Input
 						id="proof"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).proof"
 						autocomplete="off"
@@ -58,7 +58,7 @@
 					<label for="link">
 						<span class="label__title">Link</span>
 					</label>
-					<StyledInput
+					<Input
 						id="link"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).url"
 						autocomplete="off"
@@ -68,7 +68,7 @@
 					<label for="title">
 						<span class="label__title">Title</span>
 					</label>
-					<StyledInput
+					<Input
 						id="title"
 						v-model="(modPackData[currentIndex] as ModerationUnknownModpackItem).title"
 						autocomplete="off"
@@ -189,7 +189,7 @@
 
 <script setup lang="ts">
 import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
-import { Button, StyledInput } from '@modrinth/ui'
+import { Button, Input } from '@modrinth/ui'
 import type {
 	ModerationFlameModpackItem,
 	ModerationJudgements,
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/AdvertisingDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/AdvertisingDisclosureCard.vue
index 764875a8f7..ba33bffa42 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/AdvertisingDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/AdvertisingDisclosureCard.vue
@@ -6,7 +6,7 @@ import {
 	IntlFormatted,
 	normalizeChildren,
 	SettingsFormGroup,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -71,10 +71,9 @@ const messages = defineMessages({
 				:title="formatMessage(commonMessages.explanationLabel)"
 				title-for="advertising-disclosure-note"
 			>
-				<StyledInput
+				<Textarea
 					id="advertising-disclosure-note"
 					v-model="model.note"
-					multiline
 					:rows="3"
 					class="max-w-[40rem]"
 					:disabled="disabled"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/AiDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/AiDisclosureCard.vue
index 118b45c5c5..e0280d303b 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/AiDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/AiDisclosureCard.vue
@@ -8,7 +8,7 @@ import {
 	IntlFormatted,
 	normalizeChildren,
 	SettingsFormGroup,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -110,10 +110,9 @@ function setUse(use: AiUsage, enabled: boolean) {
 				title-for="ai-disclosure-note"
 				optional
 			>
-				<StyledInput
+				<Textarea
 					id="ai-disclosure-note"
 					v-model="model.note"
-					multiline
 					:rows="3"
 					class="max-w-[40rem]"
 					:disabled="disabled"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/ArchivedDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/ArchivedDisclosureCard.vue
index feeb534347..7dca4f6ffd 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/ArchivedDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/ArchivedDisclosureCard.vue
@@ -5,7 +5,7 @@ import {
 	commonMessages,
 	defineMessages,
 	SettingsFormGroup,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
@@ -68,10 +68,9 @@ const messages = defineMessages({
 				title-for="archived-disclosure-note"
 				optional
 			>
-				<StyledInput
+				<Textarea
 					id="archived-disclosure-note"
 					v-model="model.note"
-					multiline
 					:rows="3"
 					class="max-w-[40rem]"
 					:disabled="disabled"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/DerivativeDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/DerivativeDisclosureCard.vue
index 2ab6664a59..23da3862cf 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/DerivativeDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/DerivativeDisclosureCard.vue
@@ -4,8 +4,9 @@ import {
 	Button,
 	commonMessages,
 	defineMessages,
+	Input,
 	SettingsFormGroup,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 import { watch } from 'vue'
@@ -131,7 +132,7 @@ function setOptionalField(
 					:title-for="`derivative-name-${index}`"
 					class="max-w-[40rem]"
 				>
-					<StyledInput
+					<Input
 						:id="`derivative-name-${index}`"
 						:model-value="source.label"
 						:disabled="disabled"
@@ -146,7 +147,7 @@ function setOptionalField(
 					:title-for="`derivative-link-${index}`"
 					class="max-w-[40rem]"
 				>
-					<StyledInput
+					<Input
 						:id="`derivative-link-${index}`"
 						:model-value="source.link ?? undefined"
 						type="url"
@@ -160,10 +161,9 @@ function setOptionalField(
 					:title-for="`derivative-note-${index}`"
 					class="max-w-[40rem]"
 				>
-					<StyledInput
+					<Textarea
 						:id="`derivative-note-${index}`"
 						:model-value="source.note ?? undefined"
-						multiline
 						:rows="3"
 						:disabled="disabled"
 						@update:model-value="(value) => setOptionalField(index, 'note', value)"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/PaidFeaturesDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/PaidFeaturesDisclosureCard.vue
index 2fc186bea6..06f113d3a6 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/PaidFeaturesDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/PaidFeaturesDisclosureCard.vue
@@ -5,8 +5,8 @@ import {
 	commonMessages,
 	defineMessages,
 	IconButton,
+	Input,
 	SettingsFormGroup,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { watch } from 'vue'
@@ -75,7 +75,7 @@ function removeFeature(index: number) {
 		<template #expanded>
 			<SettingsFormGroup :title="formatMessage(messages.featuresDescription)">
 				<div v-for="(_, index) in model.features" :key="index" class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						v-model="model.features[index]"
 						class="min-w-0 flex-1"
 						:disabled="disabled"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/PhotosensitivityDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/PhotosensitivityDisclosureCard.vue
index 4224a04205..abb134f43e 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/PhotosensitivityDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/PhotosensitivityDisclosureCard.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { EyeIcon } from '@modrinth/assets'
-import {
-	commonMessages,
-	defineMessages,
-	SettingsFormGroup,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { commonMessages, defineMessages, SettingsFormGroup, Textarea, useVIntl } from '@modrinth/ui'
 
 import DisclosureToggleCard from './DisclosureToggleCard.vue'
 import type { DisclosureCardMetaProps, DisclosureLockStatus, NoteDisclosure } from './types'
@@ -53,10 +47,9 @@ const messages = defineMessages({
 				:title="formatMessage(commonMessages.explanationLabel)"
 				title-for="photosensitivity-disclosure-note"
 			>
-				<StyledInput
+				<Textarea
 					id="photosensitivity-disclosure-note"
 					v-model="model.note"
-					multiline
 					:rows="3"
 					class="max-w-[40rem]"
 					:disabled="disabled"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/SystemInteractionsDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/SystemInteractionsDisclosureCard.vue
index d3466a0a4c..f1644d1991 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/SystemInteractionsDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/SystemInteractionsDisclosureCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CircuitBoardIcon } from '@modrinth/assets'
-import { defineMessages, SettingsFormGroup, StyledInput, useVIntl } from '@modrinth/ui'
+import { defineMessages, SettingsFormGroup, Textarea, useVIntl } from '@modrinth/ui'
 
 import DisclosureToggleCard from './DisclosureToggleCard.vue'
 import type {
@@ -54,10 +54,9 @@ const messages = defineMessages({
 				:title="formatMessage(messages.noteLabel)"
 				title-for="system-interactions-disclosure-note"
 			>
-				<StyledInput
+				<Textarea
 					id="system-interactions-disclosure-note"
 					v-model="model.note"
-					multiline
 					:rows="3"
 					class="max-w-[40rem]"
 					:disabled="disabled"
diff --git a/apps/frontend/src/components/ui/project-settings/disclosures/TelemetryDisclosureCard.vue b/apps/frontend/src/components/ui/project-settings/disclosures/TelemetryDisclosureCard.vue
index d369f4217d..4269bb35f9 100644
--- a/apps/frontend/src/components/ui/project-settings/disclosures/TelemetryDisclosureCard.vue
+++ b/apps/frontend/src/components/ui/project-settings/disclosures/TelemetryDisclosureCard.vue
@@ -7,8 +7,8 @@ import {
 	defineMessages,
 	disclosureTelemetryConsentMessages,
 	IconButton,
+	Input,
 	SettingsFormGroup,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { watch } from 'vue'
@@ -107,7 +107,7 @@ function removeEntry(index: number) {
 				:description="formatMessage(messages.dataDescription)"
 			>
 				<div v-for="(_, index) in model.entries" :key="index" class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						v-model="model.entries[index]"
 						class="min-w-0 flex-1"
 						:disabled="disabled"
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 4751a030b4..0929966331 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -544,7 +544,7 @@
 						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newProject) }}
 					</template>
 					<template #new-server-project>
-						<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.newServerProject) }}
+						<ServerIcon aria-hidden="true" /> {{ formatMessage(messages.newServerProject) }}
 					</template>
 					<!-- <template #import-project> <BoxImportIcon /> Import project </template>-->
 					<template #new-collection>
@@ -1127,7 +1127,7 @@ const messages = defineMessages({
 	},
 	newServerProject: {
 		id: 'layout.action.new-server-project',
-		defaultMessage: 'New server',
+		defaultMessage: 'New server project',
 	},
 	newCollection: {
 		id: 'layout.action.new-collection',
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 36b9560015..38ef534d84 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -2679,7 +2679,7 @@
     "message": "New project"
   },
   "layout.action.new-server-project": {
-    "message": "New server"
+    "message": "New server project"
   },
   "layout.action.publish": {
     "message": "Publish"
diff --git a/apps/frontend/src/pages/[type]/[project]/gallery.vue b/apps/frontend/src/pages/[type]/[project]/gallery.vue
index c4e3f0c677..d6226dba1f 100644
--- a/apps/frontend/src/pages/[type]/[project]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/gallery.vue
@@ -38,7 +38,7 @@
 				<label for="gallery-image-title">
 					<span class="label__title">Title</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-title"
 					v-model="editTitle"
 					:maxlength="64"
@@ -47,17 +47,16 @@
 				<label for="gallery-image-desc">
 					<span class="label__title">Description</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="gallery-image-desc"
 					v-model="editDescription"
-					multiline
 					:maxlength="255"
 					placeholder="Enter description..."
 				/>
 				<label for="gallery-image-ordering">
 					<span class="label__title">Order Index</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-ordering"
 					v-model="editOrder"
 					type="number"
@@ -305,8 +304,9 @@ import {
 	FileButton,
 	IconButton,
 	injectProjectPageContext,
+	Input,
 	NewModal as Modal,
-	StyledInput,
+	Textarea,
 	useFormatDateTime,
 } from '@modrinth/ui'
 import { useEventListener } from '@vueuse/core'
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
index f54f48f9f8..3f54cfe477 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/gallery.vue
@@ -38,7 +38,7 @@
 				<label for="gallery-image-title">
 					<span class="label__title">Title</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-title"
 					v-model="editTitle"
 					:maxlength="64"
@@ -47,17 +47,16 @@
 				<label for="gallery-image-desc">
 					<span class="label__title">Description</span>
 				</label>
-				<StyledInput
+				<Textarea
 					id="gallery-image-desc"
 					v-model="editDescription"
-					multiline
 					:maxlength="255"
 					placeholder="Enter description..."
 				/>
 				<label for="gallery-image-ordering">
 					<span class="label__title">Order Index</span>
 				</label>
-				<StyledInput
+				<Input
 					id="gallery-image-ordering"
 					v-model="editOrder"
 					type="number"
@@ -296,8 +295,9 @@ import {
 	FileButton,
 	IconButton,
 	injectProjectPageContext,
+	Input,
 	NewModal as Modal,
-	StyledInput,
+	Textarea,
 	useFormatDateTime,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/general.vue b/apps/frontend/src/pages/[type]/[project]/settings/general.vue
index 8a4bf18911..7576e9fd12 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/general.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/general.vue
@@ -5,9 +5,9 @@ import {
 	defineMessages,
 	IconSelect,
 	injectProjectPageContext,
+	Input,
 	type MessageDescriptor,
 	SettingsLabel,
-	StyledInput,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,
@@ -143,7 +143,7 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 					:description="messages.nameDescription"
 				/>
 				<div class="flex">
-					<StyledInput
+					<Input
 						id="project-name"
 						v-model="current.title"
 						:placeholder="formatMessage(placeholder.name)"
@@ -159,7 +159,7 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 					:title="messages.taglineTitle"
 					:description="messages.taglineDescription"
 				/>
-				<StyledInput
+				<Input
 					id="project-tagline"
 					v-model="current.tagline"
 					:placeholder="formatMessage(placeholder.tagline)"
@@ -170,10 +170,17 @@ const placeholder = computed(() => placeholders[placeholderIndex.value] ?? place
 			</div>
 			<div class="mt-4">
 				<SettingsLabel id="project-url" :title="messages.urlTitle" />
-				<div class="text-input-wrapper">
-					<div class="text-input-wrapper__before">https://modrinth.com/project/</div>
-					<StyledInput id="project-url" v-model="current.url" :maxlength="64" autocomplete="off" />
-				</div>
+				<Input
+					id="project-url"
+					v-model="current.url"
+					:maxlength="64"
+					autocomplete="off"
+					wrapper-class="w-full"
+				>
+					<template #prefix>
+						<span class="whitespace-nowrap">https://modrinth.com/project/</span>
+					</template>
+				</Input>
 			</div>
 		</div>
 	</div>
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/index.vue b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
index 94a4b17957..12aeb73881 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/index.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/index.vue
@@ -22,40 +22,36 @@
 					<label for="project-name">
 						<span class="label__title">Name</span>
 					</label>
-					<StyledInput
-						id="project-name"
-						v-model="name"
-						:maxlength="2048"
-						:disabled="!hasPermission"
-					/>
+					<Input id="project-name" v-model="name" :maxlength="2048" :disabled="!hasPermission" />
 				</div>
 
 				<div>
 					<label for="project-slug">
 						<span class="label__title">URL</span>
 					</label>
-					<div class="text-input-wrapper !w-full">
-						<div class="text-input-wrapper__before">
-							<span class="hidden sm:inline">https://modrinth.com</span>/{{ projectTypeForUrl }}/
-						</div>
-						<StyledInput
-							id="project-slug"
-							v-model="slug"
-							:maxlength="64"
-							autocomplete="off"
-							:disabled="!hasPermission"
-						/>
-					</div>
+					<Input
+						id="project-slug"
+						v-model="slug"
+						:maxlength="64"
+						autocomplete="off"
+						:disabled="!hasPermission"
+						wrapper-class="w-full"
+					>
+						<template #prefix>
+							<span class="whitespace-nowrap">
+								<span class="hidden sm:inline">https://modrinth.com</span>/{{ projectTypeForUrl }}/
+							</span>
+						</template>
+					</Input>
 				</div>
 
 				<div>
 					<label for="project-summary">
 						<span class="label__title">Summary</span>
 					</label>
-					<StyledInput
+					<Textarea
 						id="project-summary"
 						v-model="summary"
-						multiline
 						:maxlength="256"
 						:disabled="!hasPermission"
 						resize="vertical"
@@ -311,12 +307,13 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
 	SettingsInlineWarning,
 	SettingsOptionCard,
 	SettingsToggleCard,
-	StyledInput,
+	Textarea,
 	UnsavedChangesPopup,
 	useFormatBytes,
 	usePageLeaveSafety,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/license.vue b/apps/frontend/src/pages/[type]/[project]/settings/license.vue
index fea81bc4ff..621410f041 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/license.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/license.vue
@@ -73,7 +73,7 @@
 				</label>
 
 				<div class="w-1/2">
-					<StyledInput
+					<Input
 						id="license-url"
 						v-model="current.licenseUrl"
 						type="url"
@@ -106,7 +106,7 @@
 				</label>
 
 				<div class="flex w-1/2 flex-col gap-2">
-					<StyledInput
+					<Input
 						v-if="!current.nonSpdxLicense"
 						id="license-spdx"
 						v-model="current.license.short"
@@ -115,7 +115,7 @@
 						placeholder="SPDX identifier"
 						:disabled="!hasPermission"
 					/>
-					<StyledInput
+					<Input
 						v-else
 						id="license-name"
 						v-model="current.license.short"
@@ -161,7 +161,7 @@ import {
 	commonProjectSettingsMessages,
 	ConfirmLeaveModal,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/links.vue b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
index b5158f05f7..d276ba13a2 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/links.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/links.vue
@@ -145,7 +145,7 @@
 					v-tooltip="`Link includes a domain which isn't common for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-issue-tracker"
 					v-model="issuesUrl"
 					type="url"
@@ -179,7 +179,7 @@
 					v-tooltip="`Link includes a domain which isn't common for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-source-code"
 					v-model="sourceUrl"
 					type="url"
@@ -208,7 +208,7 @@
 					v-tooltip="`Discord invites are not appropriate for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-wiki-page"
 					v-model="wikiUrl"
 					type="url"
@@ -232,7 +232,7 @@
 					v-tooltip="`You're using a link which isn't common for this link type.`"
 					class="size-6 animate-pulse text-orange"
 				/>
-				<StyledInput
+				<Input
 					id="project-discord-invite"
 					v-model="discordUrl"
 					type="url"
@@ -253,7 +253,7 @@
 				:key="`donation-link-${index}`"
 				class="input-group donation-link-group"
 			>
-				<StyledInput
+				<Input
 					v-model="donationLink.url"
 					type="url"
 					:maxlength="2048"
@@ -292,7 +292,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 
 const tags = useGeneratedState()
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/members.vue b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
index 072326a3cd..574c088454 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/members.vue
@@ -33,7 +33,7 @@
 				</span>
 			</span>
 			<div class="input-group">
-				<StyledInput
+				<Input
 					id="username"
 					v-model="currentUsername"
 					placeholder="Username"
@@ -111,7 +111,7 @@
 							The title of the role that this member plays for this project.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allTeamMembers[index].user.username}-role`"
 						v-model="allTeamMembers[index].role"
 						:disabled="(currentMember?.permissions & EDIT_MEMBER) !== EDIT_MEMBER"
@@ -125,7 +125,7 @@
 							this project's revenue goes to this member.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allTeamMembers[index].user.username}-monetization-weight`"
 						v-model="allTeamMembers[index].payouts_split"
 						type="number"
@@ -381,7 +381,7 @@
 							The title of the role that this member plays for this project.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allOrgMembers[index].user.username}-role`"
 						v-model="allOrgMembers[index].role"
 						:disabled="
@@ -398,7 +398,7 @@
 							this project's revenue goes to this member.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${allOrgMembers[index].user.username}-monetization-weight`"
 						v-model="allOrgMembers[index].payouts_split"
 						type="number"
@@ -574,7 +574,7 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	StyledInput,
+	Input,
 	Toggle,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue b/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
index 3c9292154b..8e7bf2ac4a 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/permissions.vue
@@ -29,8 +29,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	Input,
 	IntlFormatted,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'
@@ -558,7 +558,7 @@ function dismissInfoBanner() {
 		</template>
 		<div class="flex flex-col gap-2">
 			<div class="grid grid-cols-1 gap-2 sm:grid-cols-[minmax(0,1fr)_auto_auto_auto]">
-				<StyledInput
+				<Input
 					v-model="searchQuery"
 					type="text"
 					autocomplete="off"
diff --git a/apps/frontend/src/pages/[type]/[project]/settings/server.vue b/apps/frontend/src/pages/[type]/[project]/settings/server.vue
index 49fde150a3..7449201047 100644
--- a/apps/frontend/src/pages/[type]/[project]/settings/server.vue
+++ b/apps/frontend/src/pages/[type]/[project]/settings/server.vue
@@ -62,7 +62,7 @@
 							}
 						"
 					>
-						<StyledInput
+						<Input
 							id="java-address"
 							v-model="javaAddress"
 							:placeholder="formatMessage(messages.enterAddressPlaceholder)"
@@ -140,7 +140,7 @@
 						</span>
 					</label>
 					<div class="mt-2 flex items-center gap-2">
-						<StyledInput
+						<Input
 							id="bedrock-address"
 							v-model="bedrockAddress"
 							:placeholder="formatMessage(messages.enterAddressPlaceholder)"
@@ -176,12 +176,12 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	Input,
 	IntlFormatted,
 	MultiSelect,
 	normalizeChildren,
 	SERVER_LANGUAGES,
 	SERVER_REGIONS,
-	StyledInput,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useVIntl,
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
index c67abeb81c..7d2db99a25 100644
--- a/apps/frontend/src/pages/admin/affiliates.vue
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -19,7 +19,7 @@
 		>
 			<h1 class="m-0 grow text-2xl font-extrabold">Manage affiliate links</h1>
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="filterQuery"
 					:icon="SearchIcon"
 					type="text"
@@ -92,7 +92,7 @@ import {
 	ConfirmModal,
 	injectModrinthClient,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 import type { User } from '@modrinth/utils'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/admin/analytics/events.vue b/apps/frontend/src/pages/admin/analytics/events.vue
index f3a9dddfb3..ddfb40773e 100644
--- a/apps/frontend/src/pages/admin/analytics/events.vue
+++ b/apps/frontend/src/pages/admin/analytics/events.vue
@@ -18,7 +18,7 @@
 		<div class="flex flex-col gap-5" @submit.prevent="saveEvent">
 			<div class="flex flex-col gap-2">
 				<span class="label__title font-semibold">Title</span>
-				<StyledInput
+				<Input
 					id="analytics-event-title"
 					ref="titleInput"
 					v-model="form.title"
@@ -49,7 +49,7 @@
 					</ButtonLink>
 				</div>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="analytics-event-link"
 						v-model="form.announcementUrl"
 						type="url"
@@ -131,7 +131,7 @@
 				<h1 class="m-0 text-2xl font-extrabold text-contrast">Analytics Events</h1>
 
 				<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
-					<StyledInput
+					<Input
 						v-model="searchQuery"
 						:icon="SearchIcon"
 						type="search"
@@ -247,11 +247,11 @@ import {
 	DatePicker,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	MultiSelect,
 	type MultiSelectOption,
 	NewModal,
 	type SortDirection,
-	StyledInput,
 	Table,
 	type TableColumn,
 } from '@modrinth/ui'
@@ -321,7 +321,7 @@ const allMetricKinds = metricKindOptions.map((option) => option.value)
 
 const deleteEventModal = ref<InstanceType<typeof ConfirmModal> | null>(null)
 const eventModal = ref<InstanceType<typeof NewModal> | null>(null)
-const titleInput = ref<InstanceType<typeof StyledInput> | null>(null)
+const titleInput = ref<InstanceType<typeof Input> | null>(null)
 const searchQuery = ref('')
 const sortColumn = ref<EventColumnKey | undefined>('date')
 const sortDirection = ref<SortDirection>('desc')
diff --git a/apps/frontend/src/pages/admin/billing/[user].vue b/apps/frontend/src/pages/admin/billing/[user].vue
index e8e9d75300..789b57b095 100644
--- a/apps/frontend/src/pages/admin/billing/[user].vue
+++ b/apps/frontend/src/pages/admin/billing/[user].vue
@@ -30,7 +30,7 @@
 						{{ selectedCharge.net }})
 					</span>
 				</label>
-				<StyledInput id="amount" v-model="refundAmount" type="number" autocomplete="off" />
+				<Input id="amount" v-model="refundAmount" type="number" autocomplete="off" />
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="unprovision" class="flex flex-col gap-1">
@@ -99,7 +99,7 @@
 					<span class="text-lg font-semibold text-contrast">Days to credit</span>
 					<span>Enter the number of days to add to the next due date.</span>
 				</label>
-				<StyledInput id="days" v-model="creditDays" type="number" :min="1" autocomplete="off" />
+				<Input id="days" v-model="creditDays" type="number" :min="1" autocomplete="off" />
 			</div>
 			<div class="flex flex-col gap-2">
 				<label for="sendEmail" class="flex flex-col gap-1">
@@ -214,8 +214,8 @@ import {
 	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
-	StyledInput,
 	Toggle,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/pages/admin/docs.vue b/apps/frontend/src/pages/admin/docs.vue
index 59847b213a..33d519348a 100644
--- a/apps/frontend/src/pages/admin/docs.vue
+++ b/apps/frontend/src/pages/admin/docs.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { Button, Card, StyledInput } from '@modrinth/ui'
+import { Button, Card, Input } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import docs from '~/templates/docs'
@@ -51,7 +51,7 @@ onMounted(() => {
 		<div class="normal-page__content">
 			<Card class="mb-6 flex flex-col gap-4">
 				<div class="flex flex-wrap items-center gap-3">
-					<StyledInput
+					<Input
 						id="doc-search"
 						v-model="query"
 						type="search"
diff --git a/apps/frontend/src/pages/admin/emails.vue b/apps/frontend/src/pages/admin/emails.vue
index 9d33284e40..3c91178cd3 100644
--- a/apps/frontend/src/pages/admin/emails.vue
+++ b/apps/frontend/src/pages/admin/emails.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { Button, IconButton, NewModal, StyledInput } from '@modrinth/ui'
+import { Button, IconButton, Input, NewModal } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import emails from '~/templates/emails'
@@ -153,7 +153,7 @@ onMounted(() => {
 							class="flex flex-col"
 						>
 							<span class="label__title">{{ variable }}</span>
-							<StyledInput
+							<Input
 								:id="`preview-${variable}`"
 								v-model="variableValues[variable]"
 								type="text"
@@ -189,7 +189,7 @@ onMounted(() => {
 		</NewModal>
 		<div class="normal-page__content">
 			<div class="flex flex-wrap items-center gap-3">
-				<StyledInput
+				<Input
 					id="email-search"
 					v-model="query"
 					type="search"
diff --git a/apps/frontend/src/pages/admin/servers/lookup.vue b/apps/frontend/src/pages/admin/servers/lookup.vue
index 29f1002235..e5f46a37e0 100644
--- a/apps/frontend/src/pages/admin/servers/lookup.vue
+++ b/apps/frontend/src/pages/admin/servers/lookup.vue
@@ -10,7 +10,7 @@
 							<span class="text-brand-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						id="server-subdomain"
 						v-model="subdomainInput"
 						:icon="ServerIcon"
@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import { ModrinthApiError } from '@modrinth/api-client'
 import { SearchIcon, ServerIcon } from '@modrinth/assets'
-import { Admonition, Button, injectModrinthClient, StyledInput } from '@modrinth/ui'
+import { Admonition, Button, injectModrinthClient, Input } from '@modrinth/ui'
 
 const client = injectModrinthClient()
 
diff --git a/apps/frontend/src/pages/admin/servers/notices.vue b/apps/frontend/src/pages/admin/servers/notices.vue
index 3c2a8160f1..586a8cc09c 100644
--- a/apps/frontend/src/pages/admin/servers/notices.vue
+++ b/apps/frontend/src/pages/admin/servers/notices.vue
@@ -24,7 +24,7 @@
 				<label for="notice-title" class="flex flex-col gap-1">
 					<span class="text-lg font-semibold text-contrast"> Title </span>
 				</label>
-				<StyledInput
+				<Input
 					id="notice-title"
 					v-model="newNoticeTitle"
 					placeholder="E.g. Maintenance"
@@ -38,20 +38,14 @@
 						<span class="text-brand-red">*</span>
 					</span>
 				</label>
-				<StyledInput
+				<Input
 					v-if="newNoticeSurvey"
 					id="notice-message"
 					v-model="newNoticeMessage"
 					placeholder="E.g. rXGtq2"
 					autocomplete="off"
 				/>
-				<StyledInput
-					v-else
-					id="notice-message"
-					v-model="newNoticeMessage"
-					multiline
-					wrapper-class="h-32"
-				/>
+				<Textarea v-else id="notice-message" v-model="newNoticeMessage" wrapper-class="h-32" />
 			</div>
 			<div v-if="!newNoticeSurvey" class="flex items-center justify-between gap-2">
 				<label for="dismissable-toggle" class="flex flex-col gap-1">
@@ -65,7 +59,7 @@
 					<span class="text-lg font-semibold text-contrast"> Announcement date </span>
 					<span>Leave blank for notice to be available immediately.</span>
 				</label>
-				<StyledInput
+				<DateInput
 					id="scheduled-date"
 					v-model="newNoticeScheduledDate"
 					type="datetime-local"
@@ -77,7 +71,7 @@
 					<span class="text-lg font-semibold text-contrast"> Expiration date </span>
 					<span>The notice will automatically be deleted after this date.</span>
 				</label>
-				<StyledInput
+				<DateInput
 					id="expiration-date"
 					v-model="newNoticeExpiresDate"
 					type="datetime-local"
@@ -263,13 +257,15 @@ import {
 	Combobox,
 	commonMessages,
 	CopyCode,
+	DateInput,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
 	ServerNotice,
-	StyledInput,
 	TagItem,
+	Textarea,
 	Toggle,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/pages/admin/user_email.vue b/apps/frontend/src/pages/admin/user_email.vue
index ab52a529af..700837ff76 100644
--- a/apps/frontend/src/pages/admin/user_email.vue
+++ b/apps/frontend/src/pages/admin/user_email.vue
@@ -10,7 +10,7 @@
 							<span class="text-brand-red">*</span>
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						id="name"
 						v-model="userEmail"
 						type="email"
@@ -31,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import { MailIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, StyledInput } from '@modrinth/ui'
+import { Button, injectNotificationManager, Input } from '@modrinth/ui'
 
 const { addNotification } = injectNotificationManager()
 
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 68a37a8a1a..7edab205b5 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -20,7 +20,7 @@
 				<label class="text-md font-semibold text-contrast" for="email">
 					{{ formatMessage(commonMessages.emailLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					id="email"
 					v-model="email"
 					:icon="MailIcon"
@@ -61,7 +61,7 @@
 
 			<div class="flex flex-col gap-2.5">
 				<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
-				<StyledInput
+				<Input
 					id="password"
 					v-model="newPassword"
 					:icon="KeyIcon"
@@ -74,7 +74,7 @@
 				<label for="confirm-password" hidden>
 					{{ formatMessage(commonMessages.passwordLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					id="confirm-password"
 					v-model="confirmNewPassword"
 					:icon="KeyIcon"
@@ -100,7 +100,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/collection/[collection].vue b/apps/frontend/src/pages/collection/[collection].vue
index 3049dcf6f7..213bfad464 100644
--- a/apps/frontend/src/pages/collection/[collection].vue
+++ b/apps/frontend/src/pages/collection/[collection].vue
@@ -84,7 +84,7 @@
 						<label class="mb-2 block text-lg font-semibold text-contrast" for="collection-title">
 							{{ formatMessage(commonMessages.titleLabel) }}
 						</label>
-						<StyledInput
+						<Input
 							id="collection-title"
 							v-model="current.name"
 							:maxlength="255"
@@ -98,10 +98,9 @@
 					>
 						{{ formatMessage(commonMessages.descriptionLabel) }}
 					</label>
-					<StyledInput
+					<Textarea
 						id="collection-description"
 						v-model="current.description"
-						multiline
 						:maxlength="255"
 						wrapper-class="h-24"
 					/>
@@ -386,6 +385,7 @@ import {
 	HorizontalRule,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NavTabs,
 	NewModal,
@@ -395,8 +395,8 @@ import {
 	ProjectList,
 	RadioButtons,
 	SidebarCard,
-	StyledInput,
 	TeleportOverflowMenu,
+	Textarea,
 	useCompactNumber,
 	useFormatDateTime,
 	useRelativeTime,
diff --git a/apps/frontend/src/pages/dashboard/affiliate-links.vue b/apps/frontend/src/pages/dashboard/affiliate-links.vue
index ce10e0c94f..308fd7808b 100644
--- a/apps/frontend/src/pages/dashboard/affiliate-links.vue
+++ b/apps/frontend/src/pages/dashboard/affiliate-links.vue
@@ -18,7 +18,7 @@
 				{{ formatMessage(messages.yourAffiliateLinks) }}
 			</h1>
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="filterQuery"
 					:icon="SearchIcon"
 					type="text"
@@ -66,7 +66,7 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index abdbb631ac..f506f4b1e2 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -4,7 +4,7 @@
 		<h2 class="text-2xl">{{ formatMessage(commonMessages.collectionsLabel) }}</h2>
 		<div class="mb-3 flex flex-col gap-3">
 			<label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
-			<StyledInput
+			<Input
 				id="search-input"
 				v-model="filterQuery"
 				:icon="SearchIcon"
@@ -152,7 +152,7 @@ import {
 	defineMessages,
 	DropdownSelect,
 	injectModrinthClient,
-	StyledInput,
+	Input,
 	useCompactNumber,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/dashboard/projects.vue b/apps/frontend/src/pages/dashboard/projects.vue
index ec29a4ca46..3aa45bcf0a 100644
--- a/apps/frontend/src/pages/dashboard/projects.vue
+++ b/apps/frontend/src/pages/dashboard/projects.vue
@@ -8,7 +8,7 @@
 						<span class="label__title">{{ formatMessage(messages.issueTrackerLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="issue-tracker-input"
 							v-model="editLinks.issues.val"
 							:disabled="editLinks.issues.clear"
@@ -31,7 +31,7 @@
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="source-code-input"
 							v-model="editLinks.source.val"
 							:disabled="editLinks.source.clear"
@@ -54,7 +54,7 @@
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="wiki-page-input"
 							v-model="editLinks.wiki.val"
 							:disabled="editLinks.wiki.clear"
@@ -80,7 +80,7 @@
 						<span class="label__title">{{ formatMessage(messages.discordInviteLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="discord-invite-input"
 							v-model="editLinks.discord.val"
 							:disabled="editLinks.discord.clear"
@@ -351,10 +351,10 @@ import {
 	FloatingActionBar,
 	IconButton,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
 	ProjectStatusBadge,
-	StyledInput,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index b74b666b6b..bae77bf9a4 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -98,7 +98,7 @@
 								<label class="hidden" for="search">{{
 									formatMessage(commonMessages.searchLabel)
 								}}</label>
-								<StyledInput
+								<Input
 									id="search"
 									v-model="searchQuery"
 									:icon="SearchIcon"
@@ -453,9 +453,9 @@ import {
 	defineMessages,
 	DropdownSelect,
 	injectModrinthClient,
+	Input,
 	IntlFormatted,
 	ProjectCard,
-	StyledInput,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/moderation/external-projects.vue b/apps/frontend/src/pages/moderation/external-projects.vue
index f77e72e99d..ef48d5d7bf 100644
--- a/apps/frontend/src/pages/moderation/external-projects.vue
+++ b/apps/frontend/src/pages/moderation/external-projects.vue
@@ -2,13 +2,13 @@
 	<NewModal ref="editModal" header="Edit external project">
 		<form class="flex flex-col gap-2" @submit.prevent="saveExternalProjectEdit">
 			<label class="font-semibold text-contrast" for="edit-form-title">Title</label>
-			<StyledInput id="edit-form-title" v-model="editForm.title" type="text" />
+			<Input id="edit-form-title" v-model="editForm.title" type="text" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-link">Link</label>
-			<StyledInput id="edit-form-link" v-model="editForm.link" type="text" />
+			<Input id="edit-form-link" v-model="editForm.link" type="text" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-cf-id">
 				CurseForge project ID
 			</label>
-			<StyledInput id="edit-form-cf-id" v-model="editForm.flameProjectId" type="text" />
+			<Input id="edit-form-cf-id" v-model="editForm.flameProjectId" type="text" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-status">Allowed?</label>
 			<Combobox
 				id="edit-form-status"
@@ -17,22 +17,13 @@
 				class="!w-full"
 			/>
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-proof">Proof</label>
-			<StyledInput
-				id="edit-form-proof"
-				v-model="editForm.proof"
-				type="text"
-				multiline
-				resize="both"
-				class="w-[30rem]"
-			/>
+			<Textarea id="edit-form-proof" v-model="editForm.proof" resize="both" class="w-[30rem]" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-exceptions">
 				Exceptions / notes
 			</label>
-			<StyledInput
+			<Textarea
 				id="edit-form-exceptions"
 				v-model="editForm.exceptions"
-				type="text"
-				multiline
 				resize="both"
 				class="w-[30rem]"
 			/>
@@ -46,7 +37,7 @@
 	</NewModal>
 	<div>
 		<form class="flex gap-2" @submit.prevent="executeSearch">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -127,8 +118,9 @@ import {
 	externalProjectLicenseStatusMessages,
 	ExternalProjectLookupCard,
 	injectModrinthClient,
+	Input,
 	NewModal,
-	StyledInput,
+	Textarea,
 	useVIntl,
 } from '@modrinth/ui'
 
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index fa6751c742..2cab2b59e8 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -157,8 +157,8 @@ import {
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	Pagination,
-	StyledInput,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/moderation/reports/index.vue b/apps/frontend/src/pages/moderation/reports/index.vue
index ac6f31def8..aa364ba579 100644
--- a/apps/frontend/src/pages/moderation/reports/index.vue
+++ b/apps/frontend/src/pages/moderation/reports/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col justify-between gap-3 lg:flex-row">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
@@ -222,10 +222,10 @@ import {
 	commonMessages,
 	formatReportType,
 	injectModrinthClient,
+	Input,
 	MultiSelect,
 	type MultiSelectItem,
 	Pagination,
-	StyledInput,
 	TeleportPopoutMenu,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/moderation/technical-review/index.vue b/apps/frontend/src/pages/moderation/technical-review/index.vue
index b46ed59776..7b250b8df8 100644
--- a/apps/frontend/src/pages/moderation/technical-review/index.vue
+++ b/apps/frontend/src/pages/moderation/technical-review/index.vue
@@ -13,8 +13,8 @@ import {
 	type ComboboxOption,
 	commonMessages,
 	injectModrinthClient,
+	Input,
 	Pagination,
-	StyledInput,
 	TeleportPopoutMenu,
 	Toggle,
 	useVIntl,
@@ -627,7 +627,7 @@ onUnmounted(() => {
 		/> -->
 
 		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<StyledInput
+			<Input
 				v-model="query"
 				:icon="SearchIcon"
 				type="text"
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/index.vue b/apps/frontend/src/pages/organization/[organization]/settings/index.vue
index 1d56108c92..ce0099539f 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/index.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/index.vue
@@ -6,7 +6,8 @@ import {
 	ConfirmModal,
 	FileButton,
 	injectNotificationManager,
-	StyledInput,
+	Input,
+	Textarea,
 	UnsavedChangesPopup,
 	useSavable,
 } from '@modrinth/ui'
@@ -187,7 +188,7 @@ const onDeleteOrganization = useClientTry(async () => {
 			<label for="project-name">
 				<span class="label__title">Name</span>
 			</label>
-			<StyledInput
+			<Input
 				id="project-name"
 				v-model="current.name"
 				:maxlength="2048"
@@ -199,7 +200,7 @@ const onDeleteOrganization = useClientTry(async () => {
 			</label>
 			<div class="text-input-wrapper">
 				<div class="text-input-wrapper__before">https://modrinth.com/organization/</div>
-				<StyledInput
+				<Input
 					id="project-slug"
 					v-model="current.slug"
 					:maxlength="64"
@@ -211,10 +212,9 @@ const onDeleteOrganization = useClientTry(async () => {
 			<label for="project-summary">
 				<span class="label__title">Summary</span>
 			</label>
-			<StyledInput
+			<Textarea
 				id="project-summary"
 				v-model="current.summary"
-				multiline
 				:maxlength="256"
 				:disabled="!hasPermission"
 				resize="vertical"
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/members.vue b/apps/frontend/src/pages/organization/[organization]/settings/members.vue
index 47f4b45fc8..dd49d54caf 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/members.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/members.vue
@@ -30,7 +30,7 @@
 				</span>
 			</span>
 			<div class="input-group">
-				<StyledInput
+				<Input
 					id="username"
 					v-model="currentUsername"
 					placeholder="Username"
@@ -118,7 +118,7 @@
 							The title of the role that this member plays for this organization.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${member.user.id}-role`"
 						v-model="member.role"
 						:disabled="
@@ -137,7 +137,7 @@
 							the organization projects' revenue goes to this member.
 						</span>
 					</label>
-					<StyledInput
+					<Input
 						:id="`member-${member.user.id}-monetization-weight`"
 						v-model="member.payouts_split"
 						type="number"
@@ -252,7 +252,7 @@ import {
 	Checkbox,
 	IconButton,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 } from '@modrinth/ui'
 import { nextTick, ref } from 'vue'
 
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
index 58c6d58e66..72048eeacf 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/projects.vue
@@ -8,7 +8,7 @@
 						<span class="label__title">{{ formatMessage(messages.issueTrackerLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="issue-tracker-input"
 							v-model="editLinks.issues.val"
 							:disabled="editLinks.issues.clear"
@@ -31,7 +31,7 @@
 						<span class="label__title">{{ formatMessage(messages.sourceCodeLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="source-code-input"
 							v-model="editLinks.source.val"
 							:disabled="editLinks.source.clear"
@@ -54,7 +54,7 @@
 						<span class="label__title">{{ formatMessage(messages.wikiPageLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="wiki-page-input"
 							v-model="editLinks.wiki.val"
 							:disabled="editLinks.wiki.clear"
@@ -80,7 +80,7 @@
 						<span class="label__title">{{ formatMessage(messages.discordInviteLabel) }}</span>
 					</label>
 					<div class="flex gap-2">
-						<StyledInput
+						<Input
 							id="discord-invite-input"
 							v-model="editLinks.discord.val"
 							:disabled="editLinks.discord.clear"
@@ -356,10 +356,10 @@ import {
 	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
 	ProjectStatusBadge,
-	StyledInput,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/report.vue b/apps/frontend/src/pages/report.vue
index 375d3fba79..a3db983e03 100644
--- a/apps/frontend/src/pages/report.vue
+++ b/apps/frontend/src/pages/report.vue
@@ -122,7 +122,7 @@
 								}}
 							</span>
 							<div class="flex gap-4">
-								<StyledInput
+								<Input
 									id="report-item-id"
 									v-model="reportItemID"
 									placeholder="ex: Dc7EYhxG"
@@ -277,12 +277,12 @@ import {
 	formatReportItemType,
 	formatReportType,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	MarkdownEditor,
 	type MessageDescriptor,
 	RadialHeader,
 	RadioButtons,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Project, Report, User, Version } from '@modrinth/utils'
diff --git a/apps/frontend/src/pages/settings/account.vue b/apps/frontend/src/pages/settings/account.vue
index 33942d51e5..ad11e1ba42 100644
--- a/apps/frontend/src/pages/settings/account.vue
+++ b/apps/frontend/src/pages/settings/account.vue
@@ -24,7 +24,7 @@
 							formatMessage(messages.emailAddressLabel)
 						}}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="email-input"
 						v-model="email"
 						:maxlength="2048"
@@ -68,7 +68,7 @@
 							formatMessage(messages.oldPasswordLabel)
 						}}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="old-password"
 						v-model="oldPassword"
 						:maxlength="2048"
@@ -92,7 +92,7 @@
 								formatMessage(messages.newPasswordLabel)
 							}}</span></label
 						>
-						<StyledInput
+						<Input
 							id="new-password"
 							v-model="newPassword"
 							:maxlength="2048"
@@ -108,7 +108,7 @@
 								formatMessage(messages.confirmNewPasswordLabel)
 							}}</span>
 						</label>
-						<StyledInput
+						<Input
 							id="confirm-new-password"
 							v-model="confirmNewPassword"
 							:maxlength="2048"
@@ -183,7 +183,7 @@
 							formatMessage(messages.twoFactorEnterCodeDescription)
 						}}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="two-factor-code"
 						v-model="twoFactorCode"
 						:maxlength="11"
@@ -248,7 +248,7 @@
 								formatMessage(messages.twoFactorVerifyCodeDescription)
 							}}</span>
 						</label>
-						<StyledInput
+						<Input
 							id="verify-code"
 							v-model="twoFactorCode"
 							:maxlength="6"
@@ -477,9 +477,9 @@ import {
 	ConfirmModal,
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
-	StyledInput,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index cf5e7e7fc7..a78db38833 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -12,7 +12,7 @@
 				<label for="app-name" class="m-0 mb-2 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.nameLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					id="app-name"
 					v-model="name"
 					:maxlength="2048"
@@ -41,7 +41,7 @@
 				<label v-if="editingId" for="app-url" class="mb-2 mt-4 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.urlLabel) }}
 				</label>
-				<StyledInput
+				<Input
 					v-if="editingId"
 					id="app-url"
 					v-model="url"
@@ -57,11 +57,10 @@
 				>
 					{{ formatMessage(messages.descriptionLabel) }}
 				</label>
-				<StyledInput
+				<Textarea
 					v-if="editingId"
 					id="app-description"
 					v-model="description"
-					multiline
 					:maxlength="255"
 					autocomplete="off"
 					:placeholder="formatMessage(messages.descriptionPlaceholder)"
@@ -92,7 +91,7 @@
 				<div class="uri-input-list">
 					<div v-for="(_, index) in redirectUris" :key="index">
 						<div class="input-group url-input-group-fixes">
-							<StyledInput
+							<Input
 								v-model="redirectUris[index]"
 								:maxlength="2048"
 								type="url"
@@ -262,10 +261,11 @@ import {
 	IconButton,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
 	normalizeChildren,
-	StyledInput,
+	Textarea,
 	useFormatDateTime,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/apps/frontend/src/pages/settings/flags.vue b/apps/frontend/src/pages/settings/flags.vue
index 57d0a35c71..b158a2c259 100644
--- a/apps/frontend/src/pages/settings/flags.vue
+++ b/apps/frontend/src/pages/settings/flags.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { SearchIcon } from '@modrinth/assets'
-import { Button, StyledInput, Toggle } from '@modrinth/ui'
+import { Button, Input, Toggle } from '@modrinth/ui'
 import Fuse from 'fuse.js'
 import { computed, ref, shallowReactive } from 'vue'
 
@@ -42,7 +42,7 @@ useSeoMeta({
 
 <template>
 	<div class="mb-2">
-		<StyledInput
+		<Input
 			v-model="searchQuery"
 			type="search"
 			:icon="SearchIcon"
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index ec475b4f7d..dab92e1a08 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -21,7 +21,7 @@
 					<label for="pat-name">
 						<span class="font-semibold">{{ formatMessage(createModalMessages.nameLabel) }}</span>
 					</label>
-					<StyledInput
+					<Input
 						id="pat-name"
 						v-model="name"
 						:maxlength="2048"
@@ -218,9 +218,9 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
-	StyledInput,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
diff --git a/packages/moderation/src/types/node/factories.ts b/packages/moderation/src/types/node/factories.ts
index d5441d468e..d6814d076d 100644
--- a/packages/moderation/src/types/node/factories.ts
+++ b/packages/moderation/src/types/node/factories.ts
@@ -1,4 +1,4 @@
-import { Checkbox, Combobox, MarkdownEditor, StyledInput, Toggle } from '@modrinth/ui'
+import { Checkbox, Combobox, Input, MarkdownEditor, Toggle } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
 import { withAutoProps, withChildren } from './builder'
@@ -280,7 +280,7 @@ export function text(id: string) {
 			withTweak,
 			(n) =>
 				withComponent(n, {
-					component: markRaw(StyledInput),
+					component: markRaw(Input),
 					componentProps: () => ({ class: 'min-w-40 flex-1', autocomplete: 'off' }),
 				}),
 			withExtraProps,
diff --git a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
index 2773092034..527a61e869 100644
--- a/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
+++ b/packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
@@ -7,7 +7,7 @@
 				</span>
 				<span class="text-secondary mb-2">{{ formatMessage(messages.createUserDescription) }}</span>
 			</label>
-			<StyledInput
+			<Input
 				v-if="showUserField"
 				id="create-affiliate-user-input"
 				v-model="affiliateUsername"
@@ -28,14 +28,7 @@
 			</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
+					<Input
 						id="create-affiliate-title-input"
 						v-model="affiliateLinkTitle"
 						autocomplete="off"
@@ -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>
+					</Input>
 				</div>
 				<Button
 					type="colored"
@@ -69,7 +67,7 @@ import { Button } from '#ui/components/base/buttons'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import { AutoBrandIcon, NewModal, StyledInput } from '../index'
+import { AutoBrandIcon, Input, NewModal } from '../index'
 export type CreateAffiliateProps = { sourceName: string; username?: string }
 
 const props = withDefaults(
diff --git a/packages/ui/src/components/base/BaseTerminal.vue b/packages/ui/src/components/base/BaseTerminal.vue
index cc78d727eb..b169c1528f 100644
--- a/packages/ui/src/components/base/BaseTerminal.vue
+++ b/packages/ui/src/components/base/BaseTerminal.vue
@@ -22,14 +22,14 @@
 			ref="inputRef"
 			class="border-t border-solid border-b-0 border-x-0 border-surface-4 bg-surface-3 p-4"
 		>
-			<StyledInput
+			<Input
 				v-model="commandInput"
 				v-tooltip="disableInput ? disableInputTooltip : undefined"
 				:icon="TerminalSquareIcon"
 				:placeholder="disableInput ? disabledInputPlaceholder : 'Send a command'"
 				:disabled="disableInput"
 				wrapper-class="w-full"
-				input-class="!h-10"
+				size="medium"
 				@keydown.enter="submitCommand"
 			/>
 		</div>
@@ -42,7 +42,7 @@ import type { Terminal } from '@xterm/xterm'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { IconButton } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 b25d7adfd3..1da658f1ea 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -1,26 +1,18 @@
 <template>
 	<div ref="containerRef" class="relative inline-block w-full">
 		<!-- Searchable mode: input trigger -->
-		<div
-			v-if="searchable"
-			class="relative w-full rounded-xl"
-			:class="{ 'bg-surface-4': searchInputVariant === 'surface' }"
-		>
-			<!--
-				Selection mirror: horizontal padding must match StyledInput (filled + left icon uses `pl-10`,
-				else `pl-3`) and `resolvedSearchInputClass` when the chevron is shown (`!pr-9`), or the overlay
-				text will not line up with the transparent input text / caret.
-			-->
+		<div v-if="searchable" class="relative w-full rounded-xl">
+			<!-- 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>
 				<slot name="search-selection-affix" :option="selectedOption" />
 			</div>
-			<StyledInput
+			<Input
 				ref="searchTriggerRef"
 				v-model="searchQuery"
 				:icon="showSearchIcon ? SearchIcon : undefined"
@@ -35,7 +27,8 @@
 				:spellcheck="searchSpellcheck"
 				:inputmode="searchInputmode"
 				:input-attrs="searchInputAttrs"
-				wrapper-class="w-full !bg-transparent"
+				:appearance="searchInputVariant"
+				wrapper-class="w-full"
 				:input-class="resolvedSearchInputClass"
 				class="relative z-[1]"
 				@input="handleSearchInput"
@@ -45,13 +38,13 @@
 				@click="handleSearchClick"
 				@clear="handleSearchClear"
 			>
-				<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>
-			</StyledInput>
+			</Input>
 		</div>
 
 		<!-- Standard mode: button trigger -->
@@ -224,7 +217,7 @@ import type {
 	ButtonSize,
 	ButtonType,
 } from './buttons/types'
-import StyledInput from './StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 export interface ComboboxOption<T> {
 	value: T
@@ -364,7 +357,7 @@ const userHasTyped = ref(false)
 const focusedIndex = ref(-1)
 const containerRef = ref<HTMLElement>()
 const triggerRef = ref<ButtonElementHandle>()
-const searchTriggerRef = ref<InstanceType<typeof StyledInput>>()
+const searchTriggerRef = ref<InstanceType<typeof Input>>()
 const dropdownRef = ref<HTMLElement>()
 const optionsScrollbarRef = ref<HTMLElement>()
 const optionsContainerRef = ref<HTMLElement>()
@@ -410,8 +403,7 @@ const searchSelectionOverlayVisible = computed(() => {
 })
 
 const resolvedSearchInputClass = computed(() => {
-	const parts = [props.searchInputVariant === 'button' ? '!bg-button-bg' : '!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 a12c72d1e9..05c33a86b9 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -222,7 +222,7 @@
 					v-if="activeCategory.searchable"
 					class="flex justify-between border-0 border-b border-solid border-b-surface-5 py-1.5 w-full"
 				>
-					<StyledInput
+					<Input
 						v-model="categorySearchQuery"
 						:icon="SearchIcon"
 						type="text"
@@ -431,8 +431,8 @@ import { Button, type ButtonElementHandle, type ButtonSize } from '#ui/component
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { useVirtualScroll } from '../../composables/virtual-scroll'
+import Input from './inputs/Input.vue'
 import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
-import StyledInput from './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 e57e1e05f0..26bbf71282 100644
--- a/packages/ui/src/components/base/I18nDebugPanel.vue
+++ b/packages/ui/src/components/base/I18nDebugPanel.vue
@@ -13,7 +13,7 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { IconButton } from '#ui/components/base/buttons'
 
 import { injectI18nDebug } from '../../composables/i18n-debug'
-import StyledInput from './StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 const debugContext = injectI18nDebug()
 
@@ -346,7 +346,7 @@ const listMaxHeight = computed(() => `${panelHeight.value - 120}px`)
 					<div v-if="!minimized" class="flex flex-col overflow-hidden w-full">
 						<!-- Search -->
 						<div class="px-3 py-2.5 !w-full">
-							<StyledInput
+							<Input
 								ref="searchInputRef"
 								v-model="searchQuery"
 								placeholder="Search keys or values..."
diff --git a/packages/ui/src/components/base/ManySelect.vue b/packages/ui/src/components/base/ManySelect.vue
index b3c927d039..d4985935a0 100644
--- a/packages/ui/src/components/base/ManySelect.vue
+++ b/packages/ui/src/components/base/ManySelect.vue
@@ -14,7 +14,7 @@
 		</template>
 		<template #panel>
 			<div :class="dropdownClass">
-				<StyledInput
+				<Input
 					v-if="search"
 					id="search-input"
 					ref="searchInput"
@@ -69,8 +69,8 @@ import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
 import { Button, TeleportPopoutMenu } from './buttons'
+import Input from './inputs/Input.vue'
 import ScrollablePanel from './ScrollablePanel.vue'
-import StyledInput from './StyledInput.vue'
 
 type Option = string | number | object
 
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 62a6eea965..0157509f67 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -4,7 +4,7 @@
 			<label class="label" for="insert-link-label">
 				<span class="label__title">{{ formatMessage(messages.linkModalLabelFieldTitle) }}</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-link-label"
 				v-model="linkText"
 				:icon="AlignLeftIcon"
@@ -18,7 +18,7 @@
 					{{ formatMessage(messages.urlLabel) }}<span class="required">*</span>
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-link-url"
 				v-model="linkUrl"
 				:icon="LinkIcon"
@@ -76,7 +76,7 @@
 					{{ formatMessage(messages.imageModalDescriptionFieldDescription) }}
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-image-alt"
 				v-model="linkText"
 				:icon="AlignLeftIcon"
@@ -113,7 +113,7 @@
 					<UploadIcon />
 				</FileInput>
 			</div>
-			<StyledInput
+			<Input
 				v-if="!props.onImageUpload || imageUploadOption === 'link'"
 				id="insert-link-url"
 				v-model="linkUrl"
@@ -171,7 +171,7 @@
 					{{ formatMessage(messages.videoModalUrlFieldDescription) }}
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				id="insert-video-url"
 				v-model="linkUrl"
 				:icon="YouTubeIcon"
@@ -250,7 +250,9 @@
 				</div>
 			</div>
 		</div>
-		<div ref="editorRef" :class="{ hide: previewMode }" />
+		<InputFrame :class="{ hide: previewMode }" :disabled="disabled" multiline>
+			<div ref="editorRef" class="min-w-0 w-full flex-1 self-stretch" />
+		</InputFrame>
 		<div v-if="!previewMode" class="info-blurb mt-2">
 			<div class="info-blurb">
 				<InfoIcon />
@@ -333,8 +335,9 @@ import { commonMessages } from '../../utils/common-messages.ts'
 import NewModal from '../modal/NewModal.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
+import Input from './inputs/Input.vue'
+import InputFrame from './inputs/InputFrame.vue'
 import IntlFormatted from './IntlFormatted.vue'
-import StyledInput from './StyledInput.vue'
 import Toggle from './Toggle.vue'
 
 const { formatMessage } = useVIntl()
@@ -574,45 +577,40 @@ const resolvedPlaceholder = computed(
 	() => props.placeholder ?? formatMessage(messages.editorPlaceholder),
 )
 
-onMounted(() => {
-	const updateListener = EditorView.updateListener.of((update) => {
-		if (update.docChanged) {
-			updateCurrentValue(update.state.doc.toString())
-		}
-	})
-
-	editorThemeCompartment = new Compartment()
-
-	const theme = EditorView.theme({
-		// in defaults.scss there's references to .cm-content and such to inherit global styles
+function createEditorTheme(disabled = props.disabled) {
+	return EditorView.theme({
 		'&': {
-			borderRadius: 'var(--radius-md)',
-			background: 'var(--color-button-bg)',
-			border: '0.25rem solid transparent',
-			transition: 'border-color 0.1s ease-in-out',
+			background: 'transparent',
+			width: '100%',
 		},
 		'&.cm-focused': {
-			'box-shadow': 'inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow)',
-			color: 'var(--color-contrast)',
 			outline: 'none',
 		},
-		'.cm-focused': {
-			border: 'none',
-		},
 		'.cm-content': {
 			minHeight: props.minHeight ? `${props.minHeight}px` : '200px',
-			marginBlockEnd: '0.5rem',
-			padding: '0.5rem',
+			padding: '0',
 			caretColor: 'var(--color-contrast)',
 			width: '100%',
+			pointerEvents: disabled ? 'none' : 'auto',
 		},
 		'.cm-scroller': {
-			borderRadius: 'var(--radius-md)',
 			height: '100%',
 			maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
 			overflow: 'auto',
 		},
 	})
+}
+
+onMounted(() => {
+	const updateListener = EditorView.updateListener.of((update) => {
+		if (update.docChanged) {
+			updateCurrentValue(update.state.doc.toString())
+		}
+	})
+
+	editorThemeCompartment = new Compartment()
+
+	const theme = createEditorTheme()
 
 	isDisabledCompartment = new Compartment()
 
@@ -838,43 +836,7 @@ watch(
 
 			if (editorThemeCompartment) {
 				editor.dispatch({
-					effects: [
-						editorThemeCompartment.reconfigure(
-							EditorView.theme({
-								// in defaults.scss there's references to .cm-content and such to inherit global styles
-								'&': {
-									borderRadius: 'var(--radius-md)',
-									background: 'var(--color-button-bg)',
-									border: '0.25rem solid transparent',
-									transition: 'border-color 0.1s ease-in-out',
-								},
-								'&.cm-focused': {
-									'box-shadow': 'inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow)',
-									color: 'var(--color-contrast)',
-									outline: 'none',
-								},
-								'.cm-focused': {
-									border: 'none',
-								},
-								'.cm-content': {
-									minHeight: props.minHeight ? `${props.minHeight}px` : '200px',
-									marginBlockEnd: '0.5rem',
-									padding: '0.5rem',
-									caretColor: 'var(--color-contrast)',
-									width: '100%',
-									opacity: newValue ? 0.6 : 1,
-									pointerEvents: newValue ? 'none' : 'all',
-									cursor: newValue ? 'not-allowed' : 'auto',
-								},
-								'.cm-scroller': {
-									borderRadius: 'var(--radius-md)',
-									height: '100%',
-									maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
-									overflow: 'auto',
-								},
-							}),
-						),
-					],
+					effects: [editorThemeCompartment.reconfigure(createEditorTheme(newValue))],
 				})
 			}
 		}
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index 7d17408333..487a328345 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -127,14 +127,13 @@
 							v-if="searchable"
 							class="px-0 py-1.5 border-0 border-solid border-b border-b-surface-5 flex"
 						>
-							<StyledInput
+							<Input
 								ref="searchInputRef"
 								v-model="searchQuery"
 								: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"
 							/>
@@ -422,7 +421,7 @@ import type {
 	ButtonSize,
 	ButtonType,
 } from './buttons/types'
-import StyledInput from './StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 export interface MultiSelectOption<T> {
 	value: T
@@ -578,7 +577,7 @@ const dropdownRef = ref<HTMLElement>()
 const optionsScrollbarRef = ref<HTMLElement>()
 const optionsContainerRef = ref<HTMLElement>()
 const selectionActionsRef = ref<HTMLElement>()
-const searchInputRef = ref<InstanceType<typeof StyledInput>>()
+const searchInputRef = ref<InstanceType<typeof Input>>()
 const rafId = ref<number | null>(null)
 const tagsContainerRef = ref<HTMLElement>()
 const optionsOverlayScrollbars = ref<OverlayScrollbarsInstance | null>(null)
diff --git a/packages/ui/src/components/base/Pagination.vue b/packages/ui/src/components/base/Pagination.vue
index 1dda6c5647..cbf59a3051 100644
--- a/packages/ui/src/components/base/Pagination.vue
+++ b/packages/ui/src/components/base/Pagination.vue
@@ -32,7 +32,7 @@
 			class="page-number-container"
 		>
 			<form v-if="item === '-'" class="grid place-content-center" @submit.prevent="goToPage">
-				<StyledInput
+				<Input
 					v-if="showPageInput === index"
 					:ref="focusInput"
 					v-model="pageInput"
@@ -118,7 +118,7 @@ import { type ComponentPublicInstance, computed, ref } from 'vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n.ts'
 
 import { Button, ButtonLink, IconButton } from './buttons'
-import StyledInput from './StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 const emit = defineEmits<{
 	'switch-page': [page: number]
@@ -179,8 +179,8 @@ function switchPage(newPage: number) {
 
 function focusInput(element: Element | ComponentPublicInstance | null) {
 	if (element && 'focus' in element) {
-		const styledInput = element as InstanceType<typeof StyledInput>
-		styledInput.focus()
+		const input = element as InstanceType<typeof Input>
+		input.focus()
 	}
 }
 
diff --git a/packages/ui/src/components/base/Slider.vue b/packages/ui/src/components/base/Slider.vue
index 6c1e30c105..a7e6f35275 100644
--- a/packages/ui/src/components/base/Slider.vue
+++ b/packages/ui/src/components/base/Slider.vue
@@ -44,7 +44,7 @@
 				<span> {{ max }} {{ unit }} </span>
 			</div>
 		</div>
-		<StyledInput
+		<Input
 			:model-value="String(currentValue)"
 			type="number"
 			class="w-24 ml-3"
@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-import StyledInput from './StyledInput.vue'
+import Input from './inputs/Input.vue'
 
 const emit = defineEmits<{ 'update:modelValue': [number] }>()
 
diff --git a/packages/ui/src/components/base/StyledInput.vue b/packages/ui/src/components/base/StyledInput.vue
deleted file mode 100644
index 83ee8624db..0000000000
--- a/packages/ui/src/components/base/StyledInput.vue
+++ /dev/null
@@ -1,228 +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 bg-surface-4 border-none rounded-xl"
-			:class="[
-				inputClass,
-				'pl-3 pr-3 py-2 text-base',
-				feedbackRingClass,
-				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"
-			:class="[
-				inputClass,
-				variant === 'filled' && icon ? 'pl-10' : 'pl-3',
-				clearable && model && variant === 'filled' ? 'pr-8' : 'pr-3',
-				size === 'small' ? 'h-8 py-1.5 text-sm' : 'h-9 py-2 text-base',
-				feedbackRingClass,
-				disabled ? 'cursor-not-allowed' : '',
-				variant === 'outlined'
-					? 'bg-transparent border border-solid border-button-bg rounded-l-xl border-r-0'
-					: 'bg-surface-4 border-none rounded-xl',
-			]"
-			@input="onInput"
-			@focus="isFocused = true"
-			@blur="isFocused = false"
-		/>
-
-		<!-- Clear button (right side, filled variant, single-line only) -->
-		<button
-			v-if="!multiline && clearable && model && !disabled && !readonly && variant === 'filled'"
-			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"
-			:aria-label="formatMessage(messages.clearInput)"
-			@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 border-button-bg rounded-r-xl text-secondary hover:text-contrast transition-colors shrink-0"
-			:aria-label="formatMessage(clearable && model ? messages.clearInput : messages.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 { SearchIcon, XIcon } from '@modrinth/assets'
-import { type Component, computed, ref } from 'vue'
-
-import { defineMessages, useVIntl } from '../../composables/i18n'
-
-const { formatMessage } = useVIntl()
-const messages = defineMessages({
-	clearInput: { id: 'input.clear', defaultMessage: 'Clear input' },
-	search: { id: 'input.search', defaultMessage: 'Search' },
-})
-
-const RING = {
-	error: 'ring-4 ring-red focus:ring-4 focus:ring-red',
-	none: 'outline-none focus:ring-4 focus:ring-brand-shadow',
-} as const
-
-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
-		clamp?: boolean
-		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',
-		clamp: false,
-		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 feedbackRingClass = computed(() => (props.error ? RING.error : RING.none))
-const resizeClass = computed(
-	() => ({ none: 'resize-none', vertical: 'resize-y', both: 'resize' })[props.resize ?? 'none'],
-)
-
-defineExpose({
-	focus: () => inputRef.value?.focus(),
-	select: () => {
-		inputRef.value?.focus()
-		inputRef.value?.select()
-	},
-	setValue: (v: string) => {
-		if (inputRef.value) inputRef.value.value = v
-	},
-})
-
-function onInput(event: Event) {
-	const target = event.target as HTMLInputElement | HTMLTextAreaElement
-	if (props.type !== 'number' || props.multiline) {
-		model.value = target.value
-		return
-	}
-	if (target.value === '') {
-		model.value = undefined
-		return
-	}
-
-	let value = Number(target.value)
-	if (props.clamp) {
-		if (props.min !== undefined) value = Math.max(props.min, value)
-		if (props.max !== undefined) value = Math.min(props.max, value)
-		target.value = String(value)
-	}
-	model.value = value
-}
-
-function clear() {
-	model.value = props.type === 'number' && !props.multiline ? undefined : ''
-	emit('clear')
-}
-</script>
diff --git a/packages/ui/src/components/base/TimeFramePicker.vue b/packages/ui/src/components/base/TimeFramePicker.vue
index 2be4e72e73..ef4f2883ef 100644
--- a/packages/ui/src/components/base/TimeFramePicker.vue
+++ b/packages/ui/src/components/base/TimeFramePicker.vue
@@ -210,7 +210,7 @@ import {
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 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/base/index.ts b/packages/ui/src/components/base/index.ts
index 5d9d7cb25a..f9a9429837 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -41,7 +41,6 @@ export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
 export type { ComboboxOption, ComboboxSearchInputVariant } from './Combobox.vue'
 export { default as Combobox } from './Combobox.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'
@@ -66,6 +65,8 @@ export { default as HorizontalRule } from './HorizontalRule.vue'
 export { default as I18nDebugPanel } from './I18nDebugPanel.vue'
 export { default as IconSelect } from './IconSelect.vue'
 export { default as InlineEditableText } from './InlineEditableText.vue'
+export type { InputAppearance, InputSize } from './inputs'
+export { DateInput, DatePicker, Input, InputClearButton, InputFrame, Textarea } from './inputs'
 export { default as IntlFormatted } from './IntlFormatted.vue'
 export { default as LoadingBar } from './LoadingBar.vue'
 export { default as LoadingIndicator } from './LoadingIndicator.vue'
@@ -120,7 +121,6 @@ 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 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/inputs/DateInput.vue b/packages/ui/src/components/base/inputs/DateInput.vue
new file mode 100644
index 0000000000..cd84943a58
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/DateInput.vue
@@ -0,0 +1,142 @@
+<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/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 7a758c26c9..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,20 +14,15 @@
 			rangeEndpointMoveState ? 'is-moving-range-end' : '',
 		]"
 	>
-		<ButtonFrame
-			as="span"
-			:class="[
-				calendarOnly
-					? '!block !h-auto !min-w-0 !bg-transparent !p-0 !shadow-none hover:!brightness-100'
-					: 'w-full !justify-start !p-0',
-				disabled ? '!cursor-not-allowed' : '',
-			]"
-		>
-			<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"
@@ -37,27 +32,32 @@
 				:readonly="readonly"
 				:autocomplete="autocomplete"
 				:class="inputClasses"
-				:tabindex="calendarOnly ? -1 : undefined"
-				:aria-hidden="calendarOnly ? 'true' : undefined"
 				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>
-		</ButtonFrame>
+			<template v-if="hasClearButton" #trailing>
+				<InputClearButton label="Clear date" @click.stop="clearValue" />
+			</template>
+		</InputFrame>
+		<input
+			v-else
+			:id="id"
+			ref="inputRef"
+			:name="name"
+			:disabled="disabled"
+			:readonly="readonly"
+			:autocomplete="autocomplete"
+			:class="inputClasses"
+			tabindex="-1"
+			aria-hidden="true"
+			type="text"
+		/>
 	</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'
@@ -65,7 +65,8 @@ 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 ButtonFrame from './buttons/ButtonFrame.vue'
+import InputClearButton from './InputClearButton.vue'
+import InputFrame from './InputFrame.vue'
 
 type DatePickerValue = string | Date | null | undefined
 type RangeEdge = 'start' | 'end'
@@ -1200,12 +1201,7 @@ const hasClearButton = computed(
 const inputClasses = computed(() => [
 	props.calendarOnly
 		? 'sr-only pointer-events-none absolute h-0 w-0 opacity-0'
-		: 'h-full w-full touch-manipulation appearance-none bg-transparent font-semibold text-primary shadow-none transition-[shadow,color] placeholder:text-secondary focus:text-contrast 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'} rounded-xl border-none py-2 text-base outline-none`
-		: '',
+		: '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,
 ])
@@ -1557,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/Input.vue b/packages/ui/src/components/base/inputs/Input.vue
new file mode 100644
index 0000000000..ab805a9aa0
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/Input.vue
@@ -0,0 +1,171 @@
+<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>
+
+		<div class="flex min-w-0 flex-1 self-stretch items-center" @click="inputRef?.focus()">
+			<div class="flex min-w-0 flex-1 items-baseline">
+				<span
+					v-if="$slots.prefix"
+					class="shrink-0 font-medium text-secondary opacity-60 transition-colors group-focus-within/input:text-contrast group-focus-within/input:opacity-100"
+					:class="size === 'small' ? 'text-sm' : 'text-base'"
+				>
+					<slot name="prefix" />
+				</span>
+
+				<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 appearance-none !min-h-0 !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"
+				/>
+			</div>
+		</div>
+
+		<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
+		clamp?: 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,
+		clamp: 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(),
+	select: () => inputRef.value?.select(),
+})
+
+function controlAttrs() {
+	const { class: _class, style: _style, ...rest } = attrs
+	return rest
+}
+
+function onInput(event: Event) {
+	const target = event.target as HTMLInputElement
+	if (props.type !== 'number') {
+		model.value = target.value
+	} else if (target.value === '') {
+		model.value = undefined
+	} else {
+		let value = target.valueAsNumber
+		if (props.clamp) {
+			if (props.min !== undefined) value = Math.max(props.min, value)
+			if (props.max !== undefined) value = Math.min(props.max, value)
+			target.value = String(value)
+		}
+		model.value = value
+	}
+
+	emit('input', event)
+}
+
+function clear() {
+	model.value = props.type === 'number' ? undefined : ''
+	emit('clear')
+}
+</script>
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..1df694387c
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/InputFrame.vue
@@ -0,0 +1,64 @@
+<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>
+<style scoped>
+:deep(input) {
+	border-radius: 0;
+}
+</style>
diff --git a/packages/ui/src/components/base/inputs/Textarea.vue b/packages/ui/src/components/base/inputs/Textarea.vue
new file mode 100644
index 0000000000..32749d0fc0
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/Textarea.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..e396a26cd2
--- /dev/null
+++ b/packages/ui/src/components/base/inputs/index.ts
@@ -0,0 +1,7 @@
+export { default as DateInput } from './DateInput.vue'
+export { default as DatePicker } from './DatePicker.vue'
+export { default as Input } from './Input.vue'
+export { default as InputClearButton } from './InputClearButton.vue'
+export { default as InputFrame } from './InputFrame.vue'
+export { default as Textarea } from './Textarea.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'
diff --git a/packages/ui/src/components/billing/PurchaseModal.vue b/packages/ui/src/components/billing/PurchaseModal.vue
index 5c291fb92a..53da3512f2 100644
--- a/packages/ui/src/components/billing/PurchaseModal.vue
+++ b/packages/ui/src/components/billing/PurchaseModal.vue
@@ -60,7 +60,7 @@
 			<div v-if="!existingSubscription">
 				<p class="my-2 text-lg font-bold">Configure your server</p>
 				<div class="flex flex-col gap-4">
-					<StyledInput v-model="serverName" placeholder="Server name" :maxlength="48" />
+					<Input v-model="serverName" placeholder="Server name" :maxlength="48" />
 					<!-- <DropdownSelect
             v-model="serverLoader"
             v-tooltip="'Select the mod loader for your server'"
@@ -136,7 +136,7 @@
 					>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold">Shared CPUs</div>
-							<StyledInput :model-value="sharedCpus" disabled wrapper-class="w-full" />
+							<Input :model-value="sharedCpus" disabled wrapper-class="w-full" />
 						</div>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold flex items-center gap-1">
@@ -148,15 +148,11 @@
 									class="h-4 w-4text-secondary opacity-60"
 								/>
 							</div>
-							<StyledInput
-								:model-value="mutatedProduct.metadata.cpu"
-								disabled
-								wrapper-class="w-full"
-							/>
+							<Input :model-value="mutatedProduct.metadata.cpu" disabled wrapper-class="w-full" />
 						</div>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold">Storage</div>
-							<StyledInput
+							<Input
 								v-model="customServerConfig.storageGbFormatted"
 								disabled
 								wrapper-class="w-full"
@@ -476,8 +472,8 @@ import { paymentMethodMessages } from '../../utils/common-messages'
 import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Combobox from '../base/Combobox.vue'
+import Input from '../base/inputs/Input.vue'
 import Slider from '../base/Slider.vue'
-import StyledInput from '../base/StyledInput.vue'
 import TagIcon from '../base/TagIcon.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
diff --git a/packages/ui/src/components/content/CollectionWidget.vue b/packages/ui/src/components/content/CollectionWidget.vue
index a7e5608f16..a4c51e44c5 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 Input from '../base/inputs/Input.vue'
 
 const { formatMessage } = useVIntl()
 const { formatCompactNumber } = useCompactNumber()
@@ -105,11 +105,11 @@ const messages = defineMessages({
 		<div
 			class="flex flex-col bg-surface-2 border-0 border-l border-solid border-surface-4 overflow-hidden"
 		>
-			<StyledInput
+			<Input
 				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 effcec44fa..f4cf0bf4ce 100644
--- a/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
+++ b/packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
@@ -3,7 +3,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import { NewModal, StyledInput } from '#ui/components'
+import { Input, NewModal } from '#ui/components'
 import { Button } from '#ui/components/base/buttons'
 import { commonMessages } from '#ui/utils'
 
@@ -190,7 +190,7 @@ defineExpose({ show, hide })
 			<p class="text-secondary m-0">
 				{{ formatMessage(messages.addFilesModalDescription) }}
 			</p>
-			<StyledInput
+			<Input
 				ref="searchInputRef"
 				v-model="searchQuery"
 				type="text"
@@ -198,7 +198,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/AddToExistingExternalProjectModal.vue b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
index 85ccadcae4..dc711bbdd1 100644
--- a/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
+++ b/packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
@@ -4,7 +4,7 @@ import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import { Accordion, NewModal, StyledInput } from '#ui/components'
+import { Accordion, Input, NewModal } from '#ui/components'
 import { Button } from '#ui/components/base/buttons'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
@@ -45,7 +45,7 @@ const { addNotification } = injectNotificationManager()
 const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
 const searchAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('searchAccordionRef')
 const filesAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('filesAccordionRef')
-const searchInputRef = useTemplateRef<InstanceType<typeof StyledInput>>('searchInputRef')
+const searchInputRef = useTemplateRef<InstanceType<typeof Input>>('searchInputRef')
 
 const query = ref('')
 const isLoading = ref(false)
@@ -218,7 +218,7 @@ defineExpose({ show, hide })
 						class="flex flex-wrap gap-2 shrink-0 p-4 bg-surface-3 border-0 border-b border-solid border-surface-5"
 						@submit.prevent="executeSearch"
 					>
-						<StyledInput
+						<Input
 							ref="searchInputRef"
 							v-model="query"
 							:icon="SearchIcon"
diff --git a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
index e36d1785d9..6fd1d8afb1 100644
--- a/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
+++ b/packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
@@ -4,7 +4,7 @@ import { PlusIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import { Accordion, Combobox, type ComboboxOption, NewModal, StyledInput } from '#ui/components'
+import { Accordion, Combobox, type ComboboxOption, Input, NewModal, Textarea } from '#ui/components'
 import { Button } from '#ui/components/base/buttons'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
@@ -143,7 +143,7 @@ defineExpose({ show, hide })
 		<div class="flex flex-col gap-4">
 			<div class="flex flex-col gap-2">
 				<label class="font-semibold text-contrast" for="add-global-title">Title</label>
-				<StyledInput
+				<Input
 					id="add-global-title"
 					v-model="title"
 					type="text"
@@ -152,7 +152,7 @@ defineExpose({ show, hide })
 			</div>
 			<div class="flex flex-col gap-2">
 				<label class="font-semibold text-contrast" for="add-global-link">Link</label>
-				<StyledInput
+				<Input
 					id="add-global-link"
 					v-model="link"
 					type="text"
@@ -164,12 +164,12 @@ defineExpose({ show, hide })
 					<label class="font-semibold text-contrast" for="add-global-flame-id">
 						CurseForge project ID
 					</label>
-					<StyledInput
+					<Input
 						id="add-global-flame-id"
 						v-model="flameProjectId"
 						type="text"
 						placeholder="1234567"
-						input-class="h-[40px]"
+						size="medium"
 						:disabled="createMutation.isPending.value"
 					/>
 				</div>
@@ -187,11 +187,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
+				<Textarea
 					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 82e99ad7cb..99df37b815 100644
--- a/packages/ui/src/components/external_files/AttributionEditor.vue
+++ b/packages/ui/src/components/external_files/AttributionEditor.vue
@@ -14,7 +14,7 @@ import { builtinLicenses } from '@modrinth/utils'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { Chips, Combobox, type ComboboxOption, StyledInput } from '#ui/components'
+import { Chips, Combobox, type ComboboxOption, Input, Textarea } from '#ui/components'
 import { FileInput } from '#ui/components/base'
 import { Button, IconButton } from '#ui/components/base/buttons'
 import { commonMessages } from '#ui/utils'
@@ -475,7 +475,7 @@ function cancelEditing() {
 			<span class="text-contrast font-semibold mt-1">
 				{{ formatMessage(messages.linkLabel) }}
 			</span>
-			<StyledInput
+			<Input
 				v-model="linkInput"
 				type="text"
 				class="max-w-[40rem]"
@@ -516,7 +516,7 @@ function cancelEditing() {
 					)
 				}}
 			</span>
-			<StyledInput
+			<Input
 				v-model="customLicenseInput"
 				type="text"
 				class="max-w-[40rem]"
@@ -543,11 +543,9 @@ function cancelEditing() {
 							formatMessage(selectedPermissionReason.notesDescription)
 						}}</span>
 					</div>
-					<StyledInput
+					<Textarea
 						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 9dc39af921..1e4e5adeb6 100644
--- a/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
+++ b/packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue
@@ -31,7 +31,7 @@ import {
 	injectProjectPageContext,
 } from '../../providers'
 import type { QuickReply } from '../../providers/attribution-moderation'
-import StyledInput from '../base/StyledInput.vue'
+import Textarea from '../base/inputs/Textarea.vue'
 import AddFilesToAttributionGroupModal from './AddFilesToAttributionGroupModal.vue'
 import AddToExistingExternalProjectModal from './AddToExistingExternalProjectModal.vue'
 import AddToGlobalPermissionsDatabaseModal from './AddToGlobalPermissionsDatabaseModal.vue'
@@ -706,9 +706,8 @@ const visibleQuickReplies = computed<OverflowMenuOption[]>(() => {
 										</div>
 									</template>
 									<template v-else>
-										<StyledInput
+										<Textarea
 											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 552ceb4c96..448eae49d6 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
@@ -83,7 +83,7 @@
 		<!-- Instance-specific: Name field -->
 		<div v-if="ctx.flowType === 'instance'" class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.nameLabel) }}</span>
-			<StyledInput
+			<Input
 				v-model="ctx.instanceName.value"
 				:placeholder="ctx.autoInstanceName.value || formatMessage(messages.instanceNamePlaceholder)"
 			/>
@@ -230,8 +230,8 @@ import Avatar from '../../../base/Avatar.vue'
 import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
+import Input from '../../../base/inputs/Input.vue'
 import PaperChannelBadge from '../../../base/PaperChannelBadge.vue'
-import StyledInput from '../../../base/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..be58f36ee3 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
@@ -5,10 +5,7 @@
 			class="flex flex-col gap-2"
 		>
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.worldNameLabel) }}</span>
-			<StyledInput
-				v-model="worldName"
-				:placeholder="formatMessage(messages.worldNamePlaceholder)"
-			/>
+			<Input v-model="worldName" :placeholder="formatMessage(messages.worldNamePlaceholder)" />
 		</div>
 
 		<div v-if="ctx.setupType.value === 'vanilla'" class="flex flex-col gap-2">
@@ -69,10 +66,7 @@
 					</template>
 				</IntlFormatted>
 			</span>
-			<StyledInput
-				v-model="worldSeed"
-				:placeholder="formatMessage(messages.worldSeedPlaceholder)"
-			/>
+			<Input v-model="worldSeed" :placeholder="formatMessage(messages.worldSeedPlaceholder)" />
 			<span class="text-sm text-secondary">{{ formatMessage(messages.worldSeedDescription) }}</span>
 		</div>
 
@@ -107,10 +101,9 @@
 						:options="generatorSettingsOptions"
 						:placeholder="formatMessage(messages.generatorSettingsPlaceholder)"
 					/>
-					<StyledInput
+					<Textarea
 						v-if="generatorSettingsMode === 'custom'"
 						v-model="generatorSettingsCustom"
-						multiline
 						:rows="4"
 						:placeholder="formatMessage(messages.generatorSettingsJsonPlaceholder)"
 						input-class="font-mono"
@@ -144,7 +137,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 Input from '../../../base/inputs/Input.vue'
+import Textarea from '../../../base/inputs/Textarea.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 3102c9bf78..a4dfcdbfe7 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
@@ -22,7 +22,7 @@
 		</template>
 		<template v-else>
 			<!-- Search -->
-			<StyledInput
+			<Input
 				v-if="ctx.importLaunchers.value.length > 0"
 				v-model="ctx.importSearchQuery.value"
 				:icon="SearchIcon"
@@ -85,7 +85,7 @@
 				<IconButton label="Browse for launcher path" @click="browseForLauncherPath">
 					<FolderSearchIcon />
 				</IconButton>
-				<StyledInput
+				<Input
 					v-model="newLauncherPath"
 					:placeholder="formatMessage(messages.launcherPathPlaceholder)"
 					class="flex-1"
@@ -109,7 +109,7 @@ import { injectInstanceImport, injectNotificationManager } from '../../../../pro
 import type { ImportableLauncher } from '../../../../providers/instance-import'
 import Checkbox from '../../../base/Checkbox.vue'
 import Collapsible from '../../../base/Collapsible.vue'
-import StyledInput from '../../../base/StyledInput.vue'
+import Input from '../../../base/inputs/Input.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 023daefcda..211bbb47d6 100644
--- a/packages/ui/src/components/modal/ConfirmModal.vue
+++ b/packages/ui/src/components/modal/ConfirmModal.vue
@@ -25,7 +25,7 @@
 					<span class="font-semibold text-contrast">{{ confirmationText }}</span> below:
 				</span>
 			</label>
-			<StyledInput
+			<Input
 				v-if="hasToType"
 				id="confirmation"
 				v-model="confirmation_typed"
@@ -58,7 +58,7 @@ import { computed, ref } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
 
-import StyledInput from '../base/StyledInput.vue'
+import Input from '../base/inputs/Input.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 70cf15203c..79ad760a84 100644
--- a/packages/ui/src/components/modal/ShareModal.vue
+++ b/packages/ui/src/components/modal/ShareModal.vue
@@ -15,7 +15,7 @@ import { computed, nextTick, ref } from 'vue'
 import { ButtonLink, IconButton } from '#ui/components/base/buttons'
 import { injectNotificationManager } from '#ui/providers'
 
-import { NewModal, StyledInput } from '../index'
+import { NewModal, Textarea } from '../index'
 
 const props = defineProps({
 	header: {
@@ -167,13 +167,7 @@ defineExpose({
 						<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
 					</IconButton>
 				</div>
-				<StyledInput
-					v-else
-					v-model="content"
-					multiline
-					resize="vertical"
-					wrapper-class="h-full w-[30rem]"
-				>
+				<Textarea v-else v-model="content" resize="vertical" wrapper-class="h-full w-[30rem]">
 					<template #right>
 						<IconButton
 							v-tooltip="'Copy Text'"
@@ -186,7 +180,7 @@ defineExpose({
 							<ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
 						</IconButton>
 					</template>
-				</StyledInput>
+				</Textarea>
 				<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 4d3d901e5a..5e9f11bdbc 100644
--- a/packages/ui/src/components/search/SearchSidebarFilter.vue
+++ b/packages/ui/src/components/search/SearchSidebarFilter.vue
@@ -79,109 +79,131 @@
 				:loading="loading"
 				:refreshing="refreshing"
 			/>
-			<template v-if="filterType.display !== 'depends-on-project'">
-				<StyledInput
-					v-if="filterType.searchable"
-					:id="`search-${filterType.id}`"
-					v-model="query"
-					:icon="SearchIcon"
-					type="text"
-					:placeholder="formatMessage(messages.searchPlaceholder)"
-					autocomplete="off"
-					clearable
-					input-class="!bg-button-bg"
-					wrapper-class="mx-2 my-1 w-[calc(100%-1rem)]"
-				/>
-				<ScrollablePanel :class="{ 'h-[16rem]': scrollable }" :disable-scrolling="!scrollable">
-					<div :class="innerPanelClass ? innerPanelClass : ''" class="flex flex-col gap-1">
-						<template v-if="groupedOptions">
-							<SearchFilterGroup
-								v-for="[groupName, options] in groupedOptions"
-								:key="`${filterType.id}-group-${groupName}`"
-								:group-name="groupName"
-								:options="options"
-								:supports="filterType.supports"
-								:included="isIncluded"
-								:excluded="isExcluded"
-								@toggle="toggleFilter"
-								@toggle-exclude="toggleNegativeFilter"
-							/>
-						</template>
-						<template v-else>
-							<template v-for="option in visibleOptions" :key="`${filterType.id}-${option.id}`">
-								<SearchFilterOption
-									:option="option"
-									:included="isIncluded(option)"
-									:excluded="isExcluded(option)"
+			<template v-else>
+				<div
+					v-if="filterType.display === 'toggle'"
+					:class="innerPanelClass ? innerPanelClass : ''"
+					class="flex flex-col gap-3"
+				>
+					<label
+						v-for="option in filterType.options"
+						:key="`${filterType.id}-toggle-${option.id}`"
+						class="flex cursor-pointer items-center justify-between text-secondary gap-3 font-semibold"
+					>
+						<span class="text-sm">{{ option.formatted_name ?? option.id }}</span>
+						<Toggle
+							:model-value="isExcluded(option)"
+							small
+							class="shrink-0"
+							@update:model-value="toggleNegativeFilter(option)"
+						/>
+					</label>
+				</div>
+				<template v-else>
+					<Input
+						v-if="filterType.searchable"
+						:id="`search-${filterType.id}`"
+						v-model="query"
+						:icon="SearchIcon"
+						type="text"
+						:placeholder="formatMessage(messages.searchPlaceholder)"
+						autocomplete="off"
+						clearable
+						size="small"
+						appearance="button"
+						wrapper-class="mx-2 my-1 w-[calc(100%-1rem)]"
+					/>
+					<ScrollablePanel :class="{ 'h-[16rem]': scrollable }" :disable-scrolling="!scrollable">
+						<div :class="innerPanelClass ? innerPanelClass : ''" class="flex flex-col gap-1">
+							<template v-if="groupedOptions">
+								<SearchFilterGroup
+									v-for="[groupName, options] in groupedOptions"
+									:key="`${filterType.id}-group-${groupName}`"
+									:group-name="groupName"
+									:options="options"
 									:supports="filterType.supports"
-									:has-sub-options="!!option.sub_options?.length"
-									:expanded="isExpanded(option)"
-									:class="{
-										'mr-3': scrollable,
-									}"
+									:included="isIncluded"
+									:excluded="isExcluded"
 									@toggle="toggleFilter"
 									@toggle-exclude="toggleNegativeFilter"
-									@toggle-expand="toggleExpand(option)"
-								>
-									<slot name="option" :filter="filterType" :option="option">
-										<span
-											v-if="option.icon"
-											class="inline-flex items-center justify-center shrink-0 h-4 w-4"
-											:style="iconStyle(option)"
-										>
-											<div
-												v-if="typeof option.icon === 'string'"
-												class="h-4 w-4"
-												v-html="option.icon"
-											/>
-											<component :is="option.icon" v-else class="h-4 w-4" />
-										</span>
-										<span class="truncate text-sm" :style="iconStyle(option)">
-											{{ option.formatted_name ?? option.id }}
-										</span>
-									</slot>
-								</SearchFilterOption>
-								<div
-									v-if="option.sub_options?.length && isExpanded(option)"
-									class="ml-4 flex flex-col gap-1"
-									:class="{ 'mr-3': scrollable }"
-								>
+								/>
+							</template>
+							<template v-else>
+								<template v-for="option in visibleOptions" :key="`${filterType.id}-${option.id}`">
 									<SearchFilterOption
-										v-for="subOption in option.sub_options"
-										:key="`${filterType.id}-${subOption.id}`"
-										:option="subOption"
-										:included="isIncluded(subOption)"
-										:excluded="isExcluded(subOption)"
+										:option="option"
+										:included="isIncluded(option)"
+										:excluded="isExcluded(option)"
 										:supports="filterType.supports"
+										:has-sub-options="!!option.sub_options?.length"
+										:expanded="isExpanded(option)"
+										:class="{
+											'mr-3': scrollable,
+										}"
 										@toggle="toggleFilter"
 										@toggle-exclude="toggleNegativeFilter"
+										@toggle-expand="toggleExpand(option)"
 									>
-										<slot name="option" :filter="filterType" :option="subOption">
-											<span class="truncate text-sm">
-												{{ subOption.formatted_name ?? subOption.id }}
+										<slot name="option" :filter="filterType" :option="option">
+											<span
+												v-if="option.icon"
+												class="inline-flex items-center justify-center shrink-0 h-4 w-4"
+												:style="iconStyle(option)"
+											>
+												<div
+													v-if="typeof option.icon === 'string'"
+													class="h-4 w-4"
+													v-html="option.icon"
+												/>
+												<component :is="option.icon" v-else class="h-4 w-4" />
+											</span>
+											<span class="truncate text-sm" :style="iconStyle(option)">
+												{{ option.formatted_name ?? option.id }}
 											</span>
 										</slot>
 									</SearchFilterOption>
-								</div>
+									<div
+										v-if="option.sub_options?.length && isExpanded(option)"
+										class="ml-4 flex flex-col gap-1"
+										:class="{ 'mr-3': scrollable }"
+									>
+										<SearchFilterOption
+											v-for="subOption in option.sub_options"
+											:key="`${filterType.id}-${subOption.id}`"
+											:option="subOption"
+											:included="isIncluded(subOption)"
+											:excluded="isExcluded(subOption)"
+											:supports="filterType.supports"
+											@toggle="toggleFilter"
+											@toggle-exclude="toggleNegativeFilter"
+										>
+											<slot name="option" :filter="filterType" :option="subOption">
+												<span class="truncate text-sm">
+													{{ subOption.formatted_name ?? subOption.id }}
+												</span>
+											</slot>
+										</SearchFilterOption>
+									</div>
+								</template>
 							</template>
-						</template>
-						<button
-							v-if="filterType.display === 'expandable'"
-							class="flex bg-transparent text-secondary border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98]"
-							@click="showMore = !showMore"
-						>
-							<DropdownIcon
-								class="h-4 w-4 transition-transform"
-								:class="{ 'rotate-180': showMore }"
-							/>
-							<span class="truncate text-sm">
-								{{
-									showMore ? formatMessage(messages.showFewer) : formatMessage(messages.showMore)
-								}}
-							</span>
-						</button>
-					</div>
-				</ScrollablePanel>
+							<button
+								v-if="filterType.display === 'expandable'"
+								class="flex bg-transparent text-secondary border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98]"
+								@click="showMore = !showMore"
+							>
+								<DropdownIcon
+									class="h-4 w-4 transition-transform"
+									:class="{ 'rotate-180': showMore }"
+								/>
+								<span class="truncate text-sm">
+									{{
+										showMore ? formatMessage(messages.showFewer) : formatMessage(messages.showMore)
+									}}
+								</span>
+							</button>
+						</div>
+					</ScrollablePanel>
+				</template>
 			</template>
 			<div :class="innerPanelClass ? innerPanelClass : ''" class="empty:hidden">
 				<Checkbox
@@ -231,7 +253,7 @@ import {
 	flattenFilterOptions,
 } from '../../utils/search'
 import Accordion from '../base/Accordion.vue'
-import { Checkbox, ScrollablePanel, StyledInput } from '../index'
+import { Checkbox, Input, ScrollablePanel, Toggle } from '../index'
 import SearchDependsOnFilter from './SearchDependsOnFilter.vue'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'
diff --git a/packages/ui/src/components/servers/backups/BackupCreateModal.vue b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
index 229f1d3d2e..660d72f5d4 100644
--- a/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -4,7 +4,7 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast">Name</span>
 			</label>
-			<StyledInput
+			<Input
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
@@ -80,7 +80,7 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
-import StyledInput from '../../base/StyledInput.vue'
+import Input from '../../base/inputs/Input.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 97c34d2a69..13b8e77316 100644
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -4,7 +4,7 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast"> Name </span>
 			</label>
-			<StyledInput
+			<Input
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
@@ -62,7 +62,7 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import { commonMessages } from '../../../utils'
-import StyledInput from '../../base/StyledInput.vue'
+import Input from '../../base/inputs/Input.vue'
 import NewModal from '../../modal/NewModal.vue'
 
 const { addNotification } = injectNotificationManager()
diff --git a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
index c59177c2fd..e1d689c0d3 100644
--- a/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
+++ b/packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
@@ -58,7 +58,7 @@
 			</div>
 			<div class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.maxUsesLabel) }}</span>
-				<StyledInput
+				<Input
 					v-model="maxUses"
 					type="number"
 					:min="1"
@@ -96,8 +96,8 @@ import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { injectNotificationManager } from '../../../providers'
 import { commonMessages } from '../../../utils/common-messages'
 import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
-import DatePicker from '../../base/DatePicker.vue'
-import StyledInput from '../../base/StyledInput.vue'
+import DatePicker from '../../base/inputs/DatePicker.vue'
+import Input from '../../base/inputs/Input.vue'
 import NewModal from '../../modal/NewModal.vue'
 import type { InviteLinkSettings } from './types'
 
diff --git a/packages/ui/src/components/version/VersionPage.vue b/packages/ui/src/components/version/VersionPage.vue
index 733842d14a..e203287720 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 Input from '../base/inputs/Input.vue'
 import Table from '../base/Table.vue'
 import TagItem from '../base/TagItem.vue'
 import TagTagItem from '../base/TagTagItem.vue'
@@ -505,7 +505,7 @@ const authorLink = computed(() =>
 			</h3>
 			<Table :columns="contentTableColumns" :data="includedContent" row-key="id">
 				<template #header-actions>
-					<StyledInput
+					<Input
 						v-model="contentSearchQuery"
 						:icon="SearchIcon"
 						:placeholder="formatMessage(messages.searchContent)"
diff --git a/packages/ui/src/layouts/shared/browse-tab/layout.vue b/packages/ui/src/layouts/shared/browse-tab/layout.vue
index e14483e4a0..5f0cb145df 100644
--- a/packages/ui/src/layouts/shared/browse-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/browse-tab/layout.vue
@@ -6,10 +6,10 @@ import { computed, ref, toValue } from 'vue'
 import Admonition from '#ui/components/base/Admonition.vue'
 import { Button, IconButton } from '#ui/components/base/buttons'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import Input from '#ui/components/base/inputs/Input.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 ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
 import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'
@@ -144,7 +144,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		:replace="ctx.variant === 'app'"
 	/>
 
-	<StyledInput
+	<Input
 		v-model="ctx.query.value"
 		:icon="SearchIcon"
 		type="text"
@@ -156,7 +156,7 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 		"
 		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 a38881d351..687b410000 100644
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -15,12 +15,12 @@
 		/>
 
 		<div class="flex items-center gap-2">
-			<StyledInput
+			<Input
 				v-model="searchQuery"
 				: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]">
@@ -104,7 +104,7 @@ import { Button } from '#ui/components/base/buttons'
 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 Input from '#ui/components/base/inputs/Input.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/managed-content-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
index 8932684043..606c1f0507 100644
--- a/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/managed-content-modal/index.vue
@@ -18,7 +18,7 @@ import type { OverflowMenuOption } from '#ui/components/base/buttons'
 import { ButtonLink } from '#ui/components/base/buttons'
 import Checkbox from '#ui/components/base/Checkbox.vue'
 import FilterPills from '#ui/components/base/FilterPills.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectPageContext } from '#ui/providers/page-context'
@@ -493,7 +493,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
 		</template>
 		<div class="flex flex-col h-[min(600px,calc(95vh-10rem))]">
 			<div class="flex flex-col gap-4 px-6 py-4 border-b border-solid border-0 border-surface-4">
-				<StyledInput
+				<Input
 					v-model="searchQuery"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchPlaceholder, { count: typeFilteredCount })"
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 ede8ffea33..89cdb4afac 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
@@ -67,7 +67,7 @@
 			style="height: 400px; overflow-y: auto"
 		>
 			<div class="flex items-start gap-3 px-6">
-				<StyledInput
+				<Input
 					v-model="searchFilter"
 					:icon="SearchIcon"
 					:placeholder="formatMessage(messages.searchPlaceholder)"
@@ -187,10 +187,7 @@
 				<span class="font-semibold text-contrast">
 					{{ formatMessage(messages.nameLabel) }}
 				</span>
-				<StyledInput
-					v-model="instanceName"
-					:placeholder="formatMessage(messages.namePlaceholder)"
-				/>
+				<Input v-model="instanceName" :placeholder="formatMessage(messages.namePlaceholder)" />
 			</div>
 
 			<div class="flex flex-col gap-2.5">
@@ -290,8 +287,8 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import { Button, IconButton } from '#ui/components/base/buttons'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
-import StyledInput from '#ui/components/base/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/content-updater-modal/index.vue b/packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
index a6d3c66943..e5a5aaa945 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
@@ -15,7 +15,7 @@
 		>
 			<div class="w-[300px] flex flex-col relative bg-surface-3">
 				<div class="p-4 pb-2">
-					<StyledInput
+					<Input
 						v-model="searchQuery"
 						:icon="SearchIcon"
 						type="text"
@@ -292,7 +292,7 @@ import { computed, ref, toRef } from 'vue'
 
 import Avatar from '#ui/components/base/Avatar.vue'
 import { Button } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 cad1e4d367..6e66501040 100644
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -27,7 +27,7 @@ import { Button, type OverflowMenuOption, TeleportOverflowMenu } from '#ui/compo
 import DropdownFilterBar from '#ui/components/base/DropdownFilterBar.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import FilterPills from '#ui/components/base/FilterPills.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -942,13 +942,13 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 						</span>
 
 						<div class="flex flex-wrap items-center gap-2">
-							<StyledInput
+							<Input
 								v-model="searchQuery"
 								:icon="SearchIcon"
 								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 42dde741c8..cde35aa9df 100644
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -4,15 +4,14 @@
 		:aria-label="formatMessage(messages.fileNavigation)"
 	>
 		<div v-if="!isEditing" class="flex items-center gap-2 @[800px]:hidden">
-			<StyledInput
+			<Input
 				:model-value="searchQuery"
 				:icon="SearchIcon"
 				type="search"
 				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)"
 			/>
@@ -95,7 +94,7 @@
 			</nav>
 
 			<div v-if="!isEditing" class="flex flex-shrink-0 items-center gap-2">
-				<StyledInput
+				<Input
 					id="search-folder"
 					:model-value="searchQuery"
 					:icon="SearchIcon"
@@ -103,8 +102,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)"
 				/>
@@ -237,7 +236,7 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { Button, IconButton, TeleportOverflowMenu } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 4248691886..8a9eb01614 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
@@ -23,7 +23,7 @@
 					@keydown.enter.exact.prevent.stop="emit('findNext')"
 					@keydown.shift.enter.prevent.stop="emit('findPrevious')"
 				>
-					<StyledInput
+					<Input
 						ref="findInputRef"
 						:model-value="findQuery"
 						type="search"
@@ -79,7 +79,7 @@
 			<div v-if="isReplaceOpen" class="flex items-center gap-1">
 				<div class="w-9 flex-shrink-0" />
 				<div @keydown.enter.prevent.stop="emit('replace', replaceQuery)">
-					<StyledInput
+					<Input
 						ref="replaceInputRef"
 						v-model="replaceQuery"
 						type="search"
@@ -116,7 +116,7 @@ import { ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, XIcon } from '@modrin
 import { nextTick, ref, watch } from 'vue'
 
 import { Button, IconButton } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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/FileCreateItemModal.vue b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
index 584f74f64a..ba07998a73 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
@@ -13,7 +13,7 @@
 				<span class="font-semibold text-contrast">{{
 					formatMessage(fileValidationMessages.nameLabel)
 				}}</span>
-				<StyledInput
+				<Input
 					ref="createInput"
 					v-model="itemName"
 					:placeholder="
@@ -50,7 +50,7 @@ import { PlusIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 805c200d31..766c119016 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
@@ -19,7 +19,7 @@
 				<span class="font-semibold text-contrast">{{
 					formatMessage(messages.destinationPath)
 				}}</span>
-				<StyledInput
+				<Input
 					ref="destinationInput"
 					v-model="destination"
 					:placeholder="formatMessage(messages.destinationPlaceholder)"
@@ -47,7 +47,7 @@ import { RightArrowIcon, XIcon } from '@modrinth/assets'
 import { nextTick, ref } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 7609b1a733..1c4f471d1c 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
@@ -7,7 +7,7 @@
 		<form class="space-y-6 md:min-w-[400px]" @submit.prevent="handleSubmit">
 			<label class="flex flex-col gap-2">
 				<span class="font-semibold text-contrast">{{ formatMessage(messages.newNameLabel) }}</span>
-				<StyledInput ref="renameInput" v-model="itemName" wrapper-class="w-full" />
+				<Input ref="renameInput" v-model="itemName" wrapper-class="w-full" />
 				<div v-if="submitted && error" class="text-sm text-red">{{ error }}</div>
 			</label>
 		</form>
@@ -31,7 +31,7 @@ import { EditIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 d63cc95c8e..bfe49939b0 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
@@ -35,7 +35,7 @@
 				<div v-else class="text-sm text-secondary">
 					{{ formatMessage(messages.zipDescription) }}
 				</div>
-				<StyledInput
+				<Input
 					v-model="url"
 					v-tooltip="props.disabled ? props.disabledTooltip : undefined"
 					:icon="LinkIcon"
@@ -104,7 +104,7 @@ import {
 import { computed, nextTick, ref } from 'vue'
 
 import { Button } from '#ui/components/base/buttons'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.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 c56d47c942..9a610883f6 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/advanced.vue
@@ -111,11 +111,10 @@
 						</Button>
 					</div>
 					<div class="relative">
-						<StyledInput
+						<Textarea
 							id="startup-command-field"
 							v-model="startupCommand"
 							v-tooltip="advancedActionTooltip"
-							multiline
 							resize="vertical"
 							input-class="font-mono field-sizing-content"
 							:disabled="isStartupLoading || !canUseAdvancedSettings"
@@ -218,7 +217,7 @@ import {
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import { Combobox, StyledInput } from '#ui/components'
+import { Combobox, Textarea } from '#ui/components'
 import { Button, ButtonLink, IconButton } from '#ui/components/base/buttons'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/general.vue b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
index 675eb1b203..e54c06e13f 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/general.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/general.vue
@@ -10,7 +10,7 @@
 								<span class="text-lg font-semibold text-contrast">Server name</span>
 							</label>
 							<div class="flex flex-col gap-2.5">
-								<StyledInput
+								<Input
 									id="server-name-field"
 									v-model="serverName"
 									v-tooltip="advancedActionTooltip"
@@ -150,7 +150,7 @@ import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useStorage } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 
-import { CopyCode, StyledInput, Toggle } from '#ui/components'
+import { CopyCode, Input, Toggle } from '#ui/components'
 import EditServerIcon from '#ui/components/servers/edit-server-icon/EditServerIcon.vue'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/network.vue b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
index 9a91d08000..4abb899f73 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -5,7 +5,7 @@
 				<NewModal ref="editAllocationModal" header="Edit allocation" width="550px">
 					<form class="flex w-full flex-col gap-2" @submit.prevent="editAllocation">
 						<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
-						<StyledInput
+						<Input
 							id="edit-allocation-name"
 							ref="editAllocationInput"
 							v-model="editAllocationName"
@@ -77,7 +77,7 @@
 						<span class="text-lg font-semibold text-contrast">Allocations</span>
 
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
-							<StyledInput
+							<Input
 								v-model="createAllocationName"
 								v-tooltip="advancedActionTooltip"
 								wrapper-class="grow max-w-[400px]"
@@ -151,7 +151,7 @@
 							<span class="text-lg font-semibold text-contrast">DNS records</span>
 						</label>
 						<div class="flex w-full flex-col items-center justify-start gap-2 sm:flex-row">
-							<StyledInput
+							<Input
 								id="user-domain"
 								v-model="userDomain"
 								wrapper-class="grow max-w-[400px]"
@@ -227,7 +227,7 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
-import { ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
+import { ConfirmModal, Input, NewModal, Table, TagItem } from '#ui/components'
 import type { TableColumn } from '#ui/components/base'
 import { Button, IconButton } from '#ui/components/base/buttons'
 import { useServerPermissions } from '#ui/composables/server-permissions'
diff --git a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
index e40efe2538..ad81023d5c 100644
--- a/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/properties.vue
@@ -31,7 +31,7 @@
 
 				<div class="w-full text-sm">
 					<label for="search-server-properties" class="sr-only"> Search server properties </label>
-					<StyledInput
+					<Input
 						id="search-server-properties"
 						v-model="searchInput"
 						wrapper-class="w-full"
@@ -77,7 +77,7 @@
 
 								<div v-if="isPropertyVisible('max_players')" class="flex flex-col gap-2.5 my-1">
 									<span class="font-semibold text-contrast">Max players</span>
-									<StyledInput
+									<Input
 										id="server-property-max-players"
 										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.max_players"
@@ -91,7 +91,7 @@
 
 								<div v-if="isPropertyVisible('motd')" class="flex flex-col gap-2.5 my-1">
 									<span class="font-semibold text-contrast">MOTD</span>
-									<StyledInput
+									<Input
 										id="server-property-motd"
 										v-model="liveProperties.motd"
 										v-tooltip="advancedActionTooltip"
@@ -160,7 +160,7 @@
 									class="flex items-center justify-between h-10"
 								>
 									<span class="font-semibold text-contrast">Protection radius</span>
-									<StyledInput
+									<Input
 										id="server-property-spawn-protection-radius"
 										v-tooltip="advancedActionTooltip"
 										:model-value="liveProperties.spawn_protection"
@@ -220,7 +220,7 @@
 													v-else-if="getPropertyDef(key).type === 'number'"
 													class="w-full sm:w-[320px]"
 												>
-													<StyledInput
+													<Input
 														:id="`server-property-${key}`"
 														v-tooltip="advancedActionTooltip"
 														:model-value="liveProperties[key]"
@@ -233,7 +233,7 @@
 													/>
 												</div>
 												<div v-else class="flex w-full justify-end sm:w-[320px]">
-													<StyledInput
+													<Input
 														:id="`server-property-${key}`"
 														v-model="liveProperties[key]"
 														v-tooltip="advancedActionTooltip"
@@ -298,7 +298,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import Fuse from 'fuse.js'
 import { computed, ref, watch } from 'vue'
 
-import { Accordion, Admonition, AutoLink, Chips, StyledInput, Toggle } from '#ui/components'
+import { Accordion, Admonition, AutoLink, Chips, Input, Toggle } from '#ui/components'
 import SaveBanner from '#ui/components/servers/SaveBanner.vue'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import { injectServerSettings } from '#ui/layouts/shared/server-settings'
diff --git a/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue b/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue
index 64e3e27043..9acaa2d770 100644
--- a/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue
+++ b/packages/ui/src/layouts/shared/user-profile/components/edit-user-modal.vue
@@ -50,7 +50,7 @@
 					{{ formatMessage(commonMessages.usernameLabel) }}
 				</label>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="admin-edit-username"
 						v-model="form.username"
 						class="w-full"
@@ -69,10 +69,9 @@
 
 			<div class="flex flex-col gap-2.5">
 				<label class="text-lg font-semibold text-contrast" for="admin-edit-bio">Bio</label>
-				<StyledInput
+				<Textarea
 					id="admin-edit-bio"
 					v-model="form.bio"
-					multiline
 					:error="form.bio.length > 160"
 					:disabled="isSaving"
 				/>
@@ -127,7 +126,8 @@ import { useRouter } from 'vue-router'
 import Avatar from '#ui/components/base/Avatar.vue'
 import { Button, FileButton } from '#ui/components/base/buttons'
 import Combobox from '#ui/components/base/Combobox.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
+import Textarea from '#ui/components/base/inputs/Textarea.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { useVIntl } from '#ui/composables'
 import { injectNotificationManager } from '#ui/providers'
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 b85f8d8fe3..e101e61e7a 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
@@ -1,12 +1,12 @@
 <template>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-2 md:flex-row">
-			<StyledInput
+			<Input
 				v-model="memberSearch"
 				: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">
@@ -118,7 +118,7 @@ import { computed, ref, watch } from 'vue'
 import { Button } from '#ui/components/base/buttons'
 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 Input from '#ui/components/base/inputs/Input.vue'
 import {
 	AccessTable,
 	apiPermissionsToAccessRole,
diff --git a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
index da0c5340a8..061d7c2e1c 100644
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -102,7 +102,7 @@
 					{{ formatMessage(messages.serversTitle) }}
 				</h1>
 				<div class="flex w-full flex-row items-center justify-end gap-2 md:mb-0">
-					<StyledInput
+					<Input
 						id="search"
 						v-model="searchInput"
 						:icon="SearchIcon"
@@ -241,12 +241,12 @@ import {
 	injectAuth,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	ModrinthServersPurchaseModal,
 	ResubscribeModal,
 	ServerListEmpty,
 	ServersGuestPlanModal,
-	StyledInput,
 	useServerBackupDownload,
 	useVIntl,
 } from '@modrinth/ui'
diff --git a/packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue b/packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
index f38537a444..4f197e5ec9 100644
--- a/packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
+++ b/packages/ui/src/layouts/wrapped/settings/AccountProfileSettings.vue
@@ -90,7 +90,7 @@
 					{{ formatMessage(commonMessages.usernameLabel) }}
 				</h2>
 				<div class="flex items-center gap-2">
-					<StyledInput
+					<Input
 						id="username-field"
 						v-model="current.username"
 						class="w-full max-w-md"
@@ -113,12 +113,7 @@
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.bioTitle) }}
 				</h2>
-				<StyledInput
-					id="bio-field"
-					v-model="current.bio"
-					multiline
-					:error="current.bio.length > 160"
-				/>
+				<Textarea id="bio-field" v-model="current.bio" :error="current.bio.length > 160" />
 				<div class="text-secondary" :class="{ 'text-red': current.bio.length > 160 }">
 					{{ current.bio.length }}/160
 				</div>
@@ -138,8 +133,9 @@ import { RouterLink } from 'vue-router'
 import Avatar from '#ui/components/base/Avatar.vue'
 import { Button, FileButton } from '#ui/components/base/buttons'
 import EmptyState from '#ui/components/base/EmptyState.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
+import Textarea from '#ui/components/base/inputs/Textarea.vue'
 import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
 import { type AuthUser, injectAuth, injectNotificationManager } from '#ui/providers'
 import { commonMessages } from '#ui/utils'
diff --git a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
index e7e735be07..0aaae57c2c 100644
--- a/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
+++ b/packages/ui/src/layouts/wrapped/settings/language-settings/language-settings-selector.vue
@@ -4,7 +4,7 @@ import Fuse from 'fuse.js/dist/fuse.basic'
 import { computed, onMounted, ref } from 'vue'
 
 import Button from '#ui/components/base/buttons/Button.vue'
-import StyledInput from '#ui/components/base/StyledInput.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import {
 	buildLocaleMessages,
 	defineMessages,
@@ -249,7 +249,7 @@ function getCategoryName(category: Category): string {
 <template>
 	<div class="flex flex-col gap-4">
 		<div v-if="$locales.length > 1" class="-mb-4">
-			<StyledInput
+			<Input
 				id="language-search"
 				v-model="$query"
 				:icon="SearchIcon"
diff --git a/packages/ui/src/locales/de-CH/index.json b/packages/ui/src/locales/de-CH/index.json
index a296ba10a1..283afb949f 100644
--- a/packages/ui/src/locales/de-CH/index.json
+++ b/packages/ui/src/locales/de-CH/index.json
@@ -2018,12 +2018,6 @@
   "icon-select.select": {
     "defaultMessage": "Icon wählen"
   },
-  "input.clear": {
-    "defaultMessage": "Eingabe löschen"
-  },
-  "input.search": {
-    "defaultMessage": "Suchen"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Version suchen..."
   },
@@ -6765,4 +6759,3 @@
     "defaultMessage": "Typ"
   }
 }
-
diff --git a/packages/ui/src/locales/de-DE/index.json b/packages/ui/src/locales/de-DE/index.json
index 6ce9bbadb2..6c942a21f6 100644
--- a/packages/ui/src/locales/de-DE/index.json
+++ b/packages/ui/src/locales/de-DE/index.json
@@ -2018,12 +2018,6 @@
   "icon-select.select": {
     "defaultMessage": "Icon auswählen"
   },
-  "input.clear": {
-    "defaultMessage": "Eingabe löschen"
-  },
-  "input.search": {
-    "defaultMessage": "Suchen"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Version suchen..."
   },
@@ -6765,4 +6759,3 @@
     "defaultMessage": "Typ"
   }
 }
-
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index 5555fc22eb..8f9dabe99c 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -2018,12 +2018,6 @@
   "icon-select.select": {
     "defaultMessage": "Select icon"
   },
-  "input.clear": {
-    "defaultMessage": "Clear input"
-  },
-  "input.search": {
-    "defaultMessage": "Search"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Search version..."
   },
diff --git a/packages/ui/src/locales/es-419/index.json b/packages/ui/src/locales/es-419/index.json
index 9b5a480ef2..d463b32471 100644
--- a/packages/ui/src/locales/es-419/index.json
+++ b/packages/ui/src/locales/es-419/index.json
@@ -2018,12 +2018,6 @@
   "icon-select.select": {
     "defaultMessage": "Seleccionar ícono"
   },
-  "input.clear": {
-    "defaultMessage": "Borrar entrada"
-  },
-  "input.search": {
-    "defaultMessage": "Buscar"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Buscar versión..."
   },
@@ -6765,4 +6759,3 @@
     "defaultMessage": "Tipo"
   }
 }
-
diff --git a/packages/ui/src/locales/es-ES/index.json b/packages/ui/src/locales/es-ES/index.json
index 64330b93f0..c7d7a99361 100644
--- a/packages/ui/src/locales/es-ES/index.json
+++ b/packages/ui/src/locales/es-ES/index.json
@@ -1988,9 +1988,6 @@
   "icon-select.select": {
     "defaultMessage": "Seleccionar icono"
   },
-  "input.search": {
-    "defaultMessage": "Buscar"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Buscar versión..."
   },
diff --git a/packages/ui/src/locales/it-IT/index.json b/packages/ui/src/locales/it-IT/index.json
index 3a4adf87f4..191bc0c336 100644
--- a/packages/ui/src/locales/it-IT/index.json
+++ b/packages/ui/src/locales/it-IT/index.json
@@ -1964,12 +1964,6 @@
   "icon-select.select": {
     "defaultMessage": "Scegli icona"
   },
-  "input.clear": {
-    "defaultMessage": "Svuota"
-  },
-  "input.search": {
-    "defaultMessage": "Cerca"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Cerca tra le versioni..."
   },
diff --git a/packages/ui/src/locales/pl-PL/index.json b/packages/ui/src/locales/pl-PL/index.json
index c72bf89f51..b384ff226a 100644
--- a/packages/ui/src/locales/pl-PL/index.json
+++ b/packages/ui/src/locales/pl-PL/index.json
@@ -1982,12 +1982,6 @@
   "icon-select.select": {
     "defaultMessage": "Wybierz ikonę"
   },
-  "input.clear": {
-    "defaultMessage": "Wyczyść pole"
-  },
-  "input.search": {
-    "defaultMessage": "Szukaj"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Szukaj wersji..."
   },
diff --git a/packages/ui/src/locales/ru-RU/index.json b/packages/ui/src/locales/ru-RU/index.json
index bddb59612a..1c597255e9 100644
--- a/packages/ui/src/locales/ru-RU/index.json
+++ b/packages/ui/src/locales/ru-RU/index.json
@@ -1934,12 +1934,6 @@
   "icon-select.select": {
     "defaultMessage": "Выбрать иконку"
   },
-  "input.clear": {
-    "defaultMessage": "Очистить ввод"
-  },
-  "input.search": {
-    "defaultMessage": "Поиск"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Поиск версии..."
   },
diff --git a/packages/ui/src/locales/sv-SE/index.json b/packages/ui/src/locales/sv-SE/index.json
index c291d9e2d6..fd9b647cf7 100644
--- a/packages/ui/src/locales/sv-SE/index.json
+++ b/packages/ui/src/locales/sv-SE/index.json
@@ -1799,12 +1799,6 @@
   "icon-select.select": {
     "defaultMessage": "Välj ikon"
   },
-  "input.clear": {
-    "defaultMessage": "Rensa indata"
-  },
-  "input.search": {
-    "defaultMessage": "Sök"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Sök efter version..."
   },
diff --git a/packages/ui/src/locales/tr-TR/index.json b/packages/ui/src/locales/tr-TR/index.json
index 7b51f12183..bcc5a02559 100644
--- a/packages/ui/src/locales/tr-TR/index.json
+++ b/packages/ui/src/locales/tr-TR/index.json
@@ -1958,9 +1958,6 @@
   "icon-select.select": {
     "defaultMessage": "Simge seç"
   },
-  "input.search": {
-    "defaultMessage": "Ara"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Sürüm ara..."
   },
diff --git a/packages/ui/src/locales/uk-UA/index.json b/packages/ui/src/locales/uk-UA/index.json
index b5b7ad2f14..a6d203efa3 100644
--- a/packages/ui/src/locales/uk-UA/index.json
+++ b/packages/ui/src/locales/uk-UA/index.json
@@ -1904,9 +1904,6 @@
   "icon-select.select": {
     "defaultMessage": "Вибрати значок"
   },
-  "input.search": {
-    "defaultMessage": "Пошук"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "Знайти версію…"
   },
diff --git a/packages/ui/src/locales/zh-CN/index.json b/packages/ui/src/locales/zh-CN/index.json
index f3a9b25051..2a71f716fd 100644
--- a/packages/ui/src/locales/zh-CN/index.json
+++ b/packages/ui/src/locales/zh-CN/index.json
@@ -2018,12 +2018,6 @@
   "icon-select.select": {
     "defaultMessage": "选择图标"
   },
-  "input.clear": {
-    "defaultMessage": "清除输入"
-  },
-  "input.search": {
-    "defaultMessage": "搜索"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "查找版本……"
   },
@@ -6765,4 +6759,3 @@
     "defaultMessage": "类型"
   }
 }
-
diff --git a/packages/ui/src/locales/zh-TW/index.json b/packages/ui/src/locales/zh-TW/index.json
index e8c6c3eed7..da4f56a829 100644
--- a/packages/ui/src/locales/zh-TW/index.json
+++ b/packages/ui/src/locales/zh-TW/index.json
@@ -2018,12 +2018,6 @@
   "icon-select.select": {
     "defaultMessage": "選擇圖示"
   },
-  "input.clear": {
-    "defaultMessage": "清除輸入"
-  },
-  "input.search": {
-    "defaultMessage": "搜尋"
-  },
   "input.search-version.placeholder": {
     "defaultMessage": "搜尋版本..."
   },
@@ -6765,4 +6759,3 @@
     "defaultMessage": "類型"
   }
 }
-
diff --git a/packages/ui/src/stories/inputs/DateInput.stories.ts b/packages/ui/src/stories/inputs/DateInput.stories.ts
new file mode 100644
index 0000000000..73ace1e600
--- /dev/null
+++ b/packages/ui/src/stories/inputs/DateInput.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import DateInput from '../../components/base/inputs/DateInput.vue'
+
+const meta = {
+	title: 'Inputs/DateInput',
+	component: DateInput,
+} satisfies Meta<typeof DateInput>
+
+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: { DateInput },
+		setup() {
+			const value = ref('2026-07-15')
+			return { value }
+		},
+		template: '<DateInput v-model="value" clearable />',
+	}),
+}
+
+export const Error: Story = {
+	args: {
+		error: true,
+	},
+}
diff --git a/packages/ui/src/stories/base/DatePicker.stories.ts b/packages/ui/src/stories/inputs/DatePicker.stories.ts
similarity index 99%
rename from packages/ui/src/stories/base/DatePicker.stories.ts
rename to packages/ui/src/stories/inputs/DatePicker.stories.ts
index c224c4283b..f4e9e0443c 100644
--- a/packages/ui/src/stories/base/DatePicker.stories.ts
+++ b/packages/ui/src/stories/inputs/DatePicker.stories.ts
@@ -1,10 +1,10 @@
 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',
+	title: 'Inputs/DatePicker',
 	component: DatePicker,
 } satisfies Meta<typeof DatePicker>
 
diff --git a/packages/ui/src/stories/base/StyledInput.stories.ts b/packages/ui/src/stories/inputs/Input.stories.ts
similarity index 56%
rename from packages/ui/src/stories/base/StyledInput.stories.ts
rename to packages/ui/src/stories/inputs/Input.stories.ts
index fa5b6340e3..a0793ba7db 100644
--- a/packages/ui/src/stories/base/StyledInput.stories.ts
+++ b/packages/ui/src/stories/inputs/Input.stories.ts
@@ -2,26 +2,22 @@ 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 Input from '../../components/base/inputs/Input.vue'
 
 const meta = {
-	title: 'Base/StyledInput',
-	component: StyledInput,
+	title: 'Inputs/Input',
+	component: Input,
 	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>
+} satisfies Meta<typeof Input>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -39,15 +35,32 @@ export const WithIcon: Story = {
 	},
 }
 
+export const WithTextPrefix: Story = {
+	render: () => ({
+		components: { Input },
+		setup() {
+			const value = ref('sodium')
+			return { value }
+		},
+		template: `
+			<Input v-model="value">
+				<template #prefix>
+					<span style="white-space: nowrap">https://modrinth.com/mod/</span>
+				</template>
+			</Input>
+		`,
+	}),
+}
+
 export const Clearable: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('Some text to clear')
 			return { value, SearchIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="SearchIcon"
 				placeholder="Search..."
@@ -59,13 +72,13 @@ export const Clearable: Story = {
 
 export const WithIconAndClearable: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('Search query')
 			return { value, SearchIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="SearchIcon"
 				placeholder="Search..."
@@ -102,18 +115,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,
@@ -132,13 +133,13 @@ export const Disabled: Story = {
 
 export const Readonly: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('This is readonly')
 			return { value, UserIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="UserIcon"
 				placeholder="Readonly input"
@@ -150,13 +151,13 @@ export const Readonly: Story = {
 
 export const Error: Story = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const value = ref('invalid-url')
 			return { value, LinkIcon }
 		},
 		template: `
-			<StyledInput
+			<Input
 				v-model="value"
 				:icon="LinkIcon"
 				type="url"
@@ -169,7 +170,7 @@ export const Error: Story = {
 
 export const AllSizes: StoryObj = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			return { SearchIcon }
 		},
@@ -177,7 +178,7 @@ export const AllSizes: StoryObj = {
 			<div style="display: flex; flex-direction: column; gap: 1rem;">
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Standard (36px)</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Standard size..."
 						size="standard"
@@ -185,133 +186,26 @@ export const AllSizes: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Small (32px)</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Small size..."
 						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>
-					<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
+					<p style="margin-bottom: 0.5rem; font-weight: 600;">Medium (40px)</p>
+					<Input
+						:icon="SearchIcon"
+						placeholder="Medium size..."
+						size="medium"
 					/>
 				</div>
 				<div>
-					<p style="margin-bottom: 0.5rem; font-weight: 600;">Resizable (vertical)</p>
-					<StyledInput
-						multiline
-						resize="vertical"
-						placeholder="Drag to resize..."
+					<p style="margin-bottom: 0.5rem; font-weight: 600;">Large (48px)</p>
+					<Input
+						:icon="SearchIcon"
+						placeholder="Large size..."
+						size="large"
 					/>
 				</div>
 			</div>
@@ -321,7 +215,7 @@ export const MultilineAllStates: StoryObj = {
 
 export const AllStates: StoryObj = {
 	render: () => ({
-		components: { StyledInput },
+		components: { Input },
 		setup() {
 			const normalValue = ref('')
 			const filledValue = ref('With content')
@@ -333,7 +227,7 @@ export const AllStates: StoryObj = {
 			<div style="display: flex; flex-direction: column; gap: 1rem; max-width: 300px;">
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Default</p>
-					<StyledInput
+					<Input
 						v-model="normalValue"
 						:icon="SearchIcon"
 						placeholder="Enter text..."
@@ -341,7 +235,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">With Value + Clearable</p>
-					<StyledInput
+					<Input
 						v-model="filledValue"
 						:icon="SearchIcon"
 						placeholder="Enter text..."
@@ -350,7 +244,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Error State</p>
-					<StyledInput
+					<Input
 						v-model="errorValue"
 						:icon="LinkIcon"
 						placeholder="Enter URL..."
@@ -359,7 +253,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Disabled</p>
-					<StyledInput
+					<Input
 						:icon="SearchIcon"
 						placeholder="Disabled..."
 						disabled
@@ -367,7 +261,7 @@ export const AllStates: StoryObj = {
 				</div>
 				<div>
 					<p style="margin-bottom: 0.5rem; font-weight: 600;">Readonly</p>
-					<StyledInput
+					<Input
 						v-model="readonlyValue"
 						:icon="SearchIcon"
 						placeholder="Readonly..."
diff --git a/packages/ui/src/stories/inputs/Textarea.stories.ts b/packages/ui/src/stories/inputs/Textarea.stories.ts
new file mode 100644
index 0000000000..08f63ce058
--- /dev/null
+++ b/packages/ui/src/stories/inputs/Textarea.stories.ts
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Textarea from '../../components/base/inputs/Textarea.vue'
+
+const meta = {
+	title: 'Inputs/Textarea',
+	component: Textarea,
+	argTypes: {
+		resize: {
+			control: 'select',
+			options: ['none', 'vertical', 'both'],
+		},
+	},
+} satisfies Meta<typeof Textarea>
+
+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: { Textarea },
+		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;">
+				<Textarea v-model="normalValue" placeholder="Enter text..." />
+				<Textarea v-model="filledValue" />
+				<Textarea v-model="errorValue" error />
+				<Textarea placeholder="Disabled..." disabled />
+				<Textarea v-model="readonlyValue" readonly />
+				<Textarea resize="vertical" placeholder="Drag to resize..." />
+			</div>
+		`,
+	}),
+}
diff --git a/standards/frontend/BUTTONS.md b/standards/frontend/BUTTONS.md
index b1f71db07c..2665cff096 100644
--- a/standards/frontend/BUTTONS.md
+++ b/standards/frontend/BUTTONS.md
@@ -342,7 +342,7 @@ only a list of actions or links.
 
 	<template #panel="{ close }">
 		<div class="flex w-72 flex-col gap-4">
-			<StyledInput v-model="versionName" label="Version name" />
+			<Input v-model="versionName" label="Version name" />
 			<Button type="colored" @click="close()">Apply</Button>
 		</div>
 	</template>
diff --git a/standards/frontend/INPUTS.md b/standards/frontend/INPUTS.md
new file mode 100644
index 0000000000..fa5c48fb91
--- /dev/null
+++ b/standards/frontend/INPUTS.md
@@ -0,0 +1,447 @@
+# Inputs
+
+Use the input components in `packages/ui/src/components/base/inputs/`. Use them for
+text, numbers, and dates. These components have the same sizes, focus style,
+appearances, disabled state, and error state.
+
+Do not make input styles with raw `<input>` or `<textarea>` elements. Use a raw control
+only if a shared component does not have the necessary function.
+
+`InputFrame` and `InputClearButton` are internal components. Do not import them directly
+into application code.
+
+## Select a component
+
+| Component    | Use                                                                        |
+| ------------ | -------------------------------------------------------------------------- |
+| `Input`      | Single-line text, email, password, number, URL, or search entry            |
+| `Textarea`   | Multi-line text entry                                                       |
+| `DateInput`  | A native browser control for a date or a local date and time               |
+| `DatePicker` | A styled calendar for ranges, multiple dates, time, or inline presentation |
+
+Use a dedicated component for each other type of control. Do not use `Input` instead
+of a select, checkbox, radio group, toggle, or file picker.
+
+Import the public input components from `@modrinth/ui`. In `packages/ui`, import them
+from `#ui/components/base/inputs`:
+
+```ts
+import { DateInput, DatePicker, Input, Textarea } from '@modrinth/ui'
+```
+
+## Labels and field descriptions
+
+The input components do not include a label, description, or validation message. Give
+each control an accessible name.
+
+For a visible label, set the same value for the label `for` and the control `id`:
+
+```vue
+<label for="project-name">Project name</label>
+<Input
+	id="project-name"
+	v-model="projectName"
+	name="name"
+	autocomplete="off"
+/>
+```
+
+An input does not have a `label` prop. Do not use a placeholder as the only label. The
+placeholder is not visible after the user enters a value.
+
+If a visible label repeats other content, use an accessible name such as `aria-label`:
+
+```vue
+<Input
+	v-model="query"
+	:icon="SearchIcon"
+	type="search"
+	aria-label="Search projects"
+	placeholder="Search projects..."
+/>
+```
+
+Connect descriptions and validation messages to the control with `aria-describedby`.
+The component sends additional attributes to the native control:
+
+```vue
+<label for="project-slug">Project URL</label>
+<Input
+	id="project-slug"
+	v-model="slug"
+	:error="Boolean(slugError)"
+	aria-describedby="project-slug-help project-slug-error"
+/>
+<p id="project-slug-help">Use lowercase letters, numbers, and dashes.</p>
+<p v-if="slugError" id="project-slug-error">
+	{{ slugError }}
+</p>
+```
+
+Use the localization system for all user-visible text. This requirement also applies
+to accessible labels.
+
+## Basic use
+
+Bind the field value with `v-model`. For text types, the `Input` model is a string. For
+`type="number"`, the model is a number or `undefined`:
+
+```vue
+<Input
+	v-model="email"
+	type="email"
+	name="email"
+	autocomplete="email"
+	placeholder="name@example.com"
+/>
+
+<Input
+	v-model="serverCount"
+	type="number"
+	:min="1"
+	:max="100"
+	:step="1"
+	clamp
+/>
+```
+
+An empty number input sets the model to `undefined`. The `clamp` prop keeps the number
+between `min` and `max`. Do not set `clamp` if validation must show the original value.
+
+Set the native input type that agrees with the value. Set `name` and `autocomplete` if
+a form or autofill uses the field.
+
+Set `inputmode` to select the correct virtual keyboard. Use it when the data format and
+the native input type are different.
+
+Use `Textarea` for multi-line content:
+
+```vue
+<Textarea
+	id="project-summary"
+	v-model="summary"
+	name="summary"
+	:maxlength="500"
+	:rows="4"
+	resize="vertical"
+/>
+```
+
+`Textarea` has three rows by default. The default value of `resize` is `none`. The other
+values are `vertical` and `both`.
+
+Use `vertical` if the layout width must not change.
+
+`Input`, `Textarea`, and `DateInput` have a `focus()` method. Use this method when a
+workflow must move keyboard focus:
+
+```ts
+const nameInput = ref<InstanceType<typeof Input> | null>(null)
+
+nameInput.value?.focus()
+```
+
+## Appearances
+
+`Input`, `Textarea`, and `DateInput` have the same three appearances:
+
+| Appearance    | Use                                                                 |
+| ------------- | ------------------------------------------------------------------- |
+| `surface`     | Standard fields on pages, cards, and modals. This is the default.  |
+| `button`      | Compact fields in panels that use the button surface.              |
+| `transparent` | Fields in a container that already shows the visible field border. |
+
+```vue
+<Input v-model="name" appearance="surface" />
+<Input v-model="filter" appearance="button" size="small" />
+<Input v-model="value" appearance="transparent" />
+```
+
+Use `transparent` only if the parent container shows the field border. A field in the
+error state uses the standard red border and highlight for all appearances.
+
+Set `appearance` to select the background and border. Do not use utility classes to
+make a different background or border.
+
+`DatePicker` has only the standard surface appearance.
+
+## Sizes
+
+`Input` and `DateInput` have four sizes. Select the size for the location. If a button
+is adjacent to the input, use the related button size:
+
+| Input size | Height | Button size | Use                                      |
+| ---------- | ------ | ----------- | ---------------------------------------- |
+| `small`    | 32 px  | `sm`        | Compact panels, toolbars, and popups     |
+| `standard` | 36 px  | `md`        | Standard fields. This is the default.    |
+| `medium`   | 40 px  | `lg`        | Prominent modal, card, and header fields |
+| `large`    | 48 px  | `xl`        | Page-level search and primary filters    |
+
+```vue
+<div class="flex items-center gap-2">
+	<Input v-model="query" size="medium" class="flex-1" />
+	<Button size="lg" type="colored">Search</Button>
+</div>
+```
+
+Use the same size for fields in a group. Do not use classes to change the height,
+padding, border radius, font size, gap, or icon size.
+
+Set `rows` or a layout class to change the `Textarea` height. `DatePicker` uses the
+standard input height.
+
+## Leading and trailing content
+
+Set `icon` on `Input` to show a decorative leading icon:
+
+```vue
+<Input
+	v-model="query"
+	:icon="SearchIcon"
+	type="search"
+	placeholder="Search..."
+/>
+```
+
+Use the `leading` slot for other decorative content. The component hides this content
+from assistive software. Do not put an interactive control or important status in this
+slot.
+
+```vue
+<Input v-model="domain">
+	<template #leading>
+		<LinkIcon />
+	</template>
+</Input>
+```
+
+Use the `trailing` slot for content that is part of the field. Give each interactive
+control an accessible name. Do not add a control that has the same function as the
+field:
+
+```vue
+<Input v-model="password" :type="showPassword ? 'text' : 'password'">
+	<template #trailing>
+		<IconButton
+			type="quiet"
+			:label="showPassword ? 'Hide password' : 'Show password'"
+			@click="showPassword = !showPassword"
+		>
+			<EyeIcon aria-hidden="true" />
+		</IconButton>
+	</template>
+</Input>
+```
+
+Use `trailing` in new code. The `right` slot exists only for compatibility with
+existing code.
+
+## Clearable inputs
+
+Set `clearable` if users often clear an optional value. You can set it on `Input`,
+`DateInput`, and `DatePicker`.
+
+The clear button is visible only when the field has a value. It is not visible when the
+field is disabled or readonly:
+
+```vue
+<Input
+	v-model="query"
+	type="search"
+	clearable
+	clear-label="Clear search"
+	@clear="refreshResults"
+/>
+```
+
+For `Input` and `DateInput`, set a localized `clear-label`. This label is the accessible
+name of the clear button. For `DateInput`, also set a localized `picker-label` for the
+calendar button.
+
+After a clear action, a text `Input` or `DateInput` model is an empty string. A number
+`Input` model is `undefined`. A single `DatePicker` model is `null`. A multiple or range
+`DatePicker` model is an empty array.
+
+The component sends a `clear` event after a clear action. Use this event only if the
+application must do an additional action. Other code can use the model change.
+
+Do not add a second clear button to the `trailing` slot when `clearable` is set.
+
+## Disabled, readonly, and error states
+
+Set `disabled` when the value is not available. A disabled control cannot receive focus
+and does not submit a value.
+
+For `Input`, `Textarea`, and `DateInput`, set `readonly` when the user must not change
+the value. A readonly control can receive focus:
+
+```vue
+<Input v-model="generatedId" readonly />
+<Input v-model="username" :disabled="accountLocked" />
+```
+
+Set `error` after validation finds an invalid value. `Input`, `Textarea`, and
+`DateInput` show the shared error style. They also set `aria-invalid` on the native
+control:
+
+```vue
+<Input
+	id="website"
+	v-model="website"
+	type="url"
+	:error="Boolean(websiteError)"
+	aria-describedby="website-error"
+/>
+<p v-if="websiteError" id="website-error">{{ websiteError }}</p>
+```
+
+The `error` prop does not show a message and does not validate the value. Show a
+specific message. Connect the message to the field. Do not use only color to show an
+error state.
+
+You can use native limits such as `required`, `min`, `max`, `step`, and `maxlength`.
+These limits do not set the `error` prop. Use application validation to control the
+visible error state.
+
+`DatePicker` uses `readonly` for a different function. It prevents text entry, but it
+does not prevent calendar selection. Set `disabled` to prevent all changes.
+
+## Native date inputs
+
+Use `DateInput` if the browser date control has the necessary function. The component
+accepts `type="date"` and `type="datetime-local"`. The model contains the native date
+string:
+
+```vue
+<label for="scheduled-date">Scheduled date</label>
+<DateInput
+	id="scheduled-date"
+	v-model="scheduledDate"
+	type="datetime-local"
+	:min="minimumDate"
+	clearable
+	clear-label="Clear scheduled date"
+	picker-label="Open scheduled date picker"
+/>
+```
+
+Set `min`, `max`, and `step` for native limits. The calendar button gives focus to the
+native input. It opens the native picker if the browser has `showPicker()`.
+
+Use `DateInput` for a native date control. Use `DatePicker` for one or more of these
+functions:
+
+- A calendar with the Modrinth style.
+- A date range or multiple dates.
+- Time controls.
+- More than one visible month.
+- An inline calendar.
+
+## Date picker
+
+`DatePicker` uses a Flatpickr calendar. In single mode, its model is one value. In
+`multiple` and `range` modes, its model is an array. The component sends user
+selections as formatted strings:
+
+```vue
+<DatePicker
+	v-model="releaseDate"
+	placeholder="Select a release date..."
+	:min-date="today"
+	clearable
+	close-on-select
+/>
+
+<DatePicker
+	v-model="reportingRange"
+	mode="range"
+	:show-months="2"
+	default-view-date="2026-01-01"
+	placeholder="Select a reporting range..."
+/>
+```
+
+The modes use these model types:
+
+| Mode       | Model type                                   | Value after clear |
+| ---------- | -------------------------------------------- | ----------------- |
+| `single`   | `string`, `Date`, `null`, or `undefined`     | `null`            |
+| `multiple` | An array of `string` or `Date` values        | `[]`              |
+| `range`    | An array of `string` or `Date` start and end | `[]`              |
+
+The stored format is `Y-m-d` by default. It is `Y-m-d H:i` when `enable-time` is set.
+The visible format is `F j, Y` by default. It is `F j, Y at h:i K` when `enable-time`
+is set.
+
+Set `date-format` and `alt-format` to use other Flatpickr formats:
+
+```vue
+<DatePicker
+	v-model="startsAt"
+	enable-time
+	time24hr
+	date-format="Y-m-d H:i"
+	alt-format="j M Y, H:i"
+/>
+```
+
+Make sure that model strings agree with `date-format`. The `alt-format` prop changes
+only the visible value.
+
+`DatePicker` sets `readonly` to true by default. The user selects a date from the
+calendar. Set `:readonly="false"` only when users can type a date.
+
+Set `close-on-select` if a single selection must close the popup. Its default value is
+`false`.
+
+Use the calendar options as follows:
+
+- Set `default-view-date` to select the month that opens when there is no value. This
+  prop does not set the model.
+- Set `view-date-alignment="right"` to put the initial date in the right calendar. Use
+  this prop when more than one month is visible.
+- Set `min-date` and `max-date` to limit the dates that a user can select.
+- Set `show-today` to highlight the current day. This prop does not select the day.
+- Set `calendar-only` to show an inline calendar without a visible input.
+- Set `position` to control the popup position and its alignment with the input.
+
+Set `preserve-day` when a selection must keep the same day number during month changes.
+If the day does not exist, `DatePicker` uses the last day of that month. When the day
+exists again, `DatePicker` restores the original day.
+
+The component sends a `clamp` event when it uses a different day. Use this event if the
+interface must explain the change:
+
+```vue
+<DatePicker
+	v-model="renewalDate"
+	preserve-day
+	@clamp="showClampedDayMessage"
+/>
+```
+
+The picker has `focus()`, `open()`, `close()`, and `clear()` methods. Use these methods
+only when a workflow requires control from the parent component.
+
+## Classes and native attributes
+
+`Input`, `Textarea`, and `DateInput` send additional attributes to the native control.
+Examples are `required`, `aria-label`, and `aria-describedby`. The outer frame receives
+`class` and `style`.
+
+Set `wrapper-class` for field width and parent layout. Set `input-class` only when the
+native control needs a layout adjustment:
+
+```vue
+<Input v-model="name" wrapper-class="w-full" />
+```
+
+The `input-attrs` prop is for input wrapper components. Application components must
+pass native attributes directly.
+
+Use the shared styles for borders, backgrounds, focus rings, height, padding, text,
+gaps, and icon sizes. Do not replace these styles with utility classes. Width and parent
+layout classes are permitted.
+
+`DatePicker` also has a `calendar-class` prop. Use it for layout or state on the
+calendar. Do not use it to replace the standard calendar styles.
diff --git a/standards/frontend/MODALS.md b/standards/frontend/MODALS.md
index b070b6307a..aa8e3e7578 100644
--- a/standards/frontend/MODALS.md
+++ b/standards/frontend/MODALS.md
@@ -305,8 +305,8 @@ const { formData } = injectMyModalContext()
 
 <template>
 	<div class="flex flex-col gap-4">
-		<StyledInput v-model="formData.name" label="Name" />
-		<StyledInput v-model="formData.description" label="Description" />
+		<Input v-model="formData.name" label="Name" />
+		<Input v-model="formData.description" label="Description" />
 	</div>
 </template>
 ```