diff --git a/.changeset/cool-pigs-wink.md b/.changeset/cool-pigs-wink.md
new file mode 100644
index 0000000000..862d9d1c13
--- /dev/null
+++ b/.changeset/cool-pigs-wink.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add Input component
diff --git a/packages/gitbook/src/components/AIChat/AIChatInput.tsx b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
index edee25d8e3..b25a95ac9d 100644
--- a/packages/gitbook/src/components/AIChat/AIChatInput.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChatInput.tsx
@@ -1,11 +1,10 @@
 import { t, tString, useLanguage } from '@/intl/client';
-import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import { useEffect, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useAIChatState } from '../AI/useAIChat';
-import { Button, HoverCard, HoverCardRoot, HoverCardTrigger } from '../primitives';
-import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
+import { HoverCard, HoverCardRoot, HoverCardTrigger } from '../primitives';
+import { Input } from '../primitives/Input';
 
 export function AIChatInput(props: {
     value: string;
@@ -24,15 +23,6 @@ export function AIChatInput(props: {
 
     const inputRef = useRef<HTMLTextAreaElement>(null);
 
-    const handleInput = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-        const textarea = event.currentTarget;
-        onChange(textarea.value);
-
-        // Auto-resize
-        textarea.style.height = 'auto';
-        textarea.style.height = `${textarea.scrollHeight}px`;
-    };
-
     useEffect(() => {
         if (chat.opened && !disabled && !loading) {
             // Add a small delay to ensure the input is rendered before focusing
@@ -57,57 +47,34 @@ export function AIChatInput(props: {
     );
 
     return (
-        <div className="depth-subtle:has-[textarea:focus]:-translate-y-px relative flex animate-blur-in-slow flex-col overflow-hidden circular-corners:rounded-3xl rounded-corners:rounded-xl bg-tint-base/9 depth-subtle:shadow-sm shadow-tint/6 ring-1 ring-tint-subtle backdrop-blur-lg transition-all depth-subtle:has-[textarea:focus]:shadow-lg has-[textarea:focus]:shadow-primary-subtle has-[textarea:focus]:ring-2 has-[textarea:focus]:ring-primary-hover contrast-more:bg-tint-base dark:shadow-tint-1">
-            <textarea
-                ref={inputRef}
-                disabled={disabled || loading}
-                data-loading={loading}
-                data-testid="ai-chat-input"
-                className={tcls(
-                    'resize-none',
-                    'focus:outline-hidden',
-                    'focus:ring-0',
-                    'w-full',
-                    'px-3',
-                    'py-3',
-                    'pb-12',
-                    'h-auto',
-                    'bg-transparent',
-                    'peer',
-                    'max-h-64',
-                    'placeholder:text-tint/8',
-                    'transition-colors',
-                    'disabled:bg-tint-subtle',
-                    'delay-300',
-                    'disabled:delay-0',
-                    'disabled:cursor-not-allowed',
-                    'data-[loading=true]:cursor-progress',
-                    'data-[loading=true]:opacity-50'
-                )}
-                value={value}
-                rows={1}
-                placeholder={tString(language, 'ai_chat_input_placeholder')}
-                onChange={handleInput}
-                onKeyDown={(event) => {
-                    if (event.key === 'Escape') {
-                        event.preventDefault();
-                        event.currentTarget.blur();
-                        return;
-                    }
-
-                    if (event.key === 'Enter' && !event.shiftKey && value.trim()) {
-                        event.preventDefault();
-                        event.currentTarget.style.height = 'auto';
-                        onSubmit(value);
-                    }
-                }}
-            />
-            {!disabled ? (
-                <div className="absolute top-2.5 right-3 animate-[fadeIn_0.2s_0.5s_ease-in-out_both] peer-focus:hidden">
-                    <KeyboardShortcut keys={['mod', 'i']} className="bg-tint-base" />
-                </div>
-            ) : null}
-            <div className="absolute inset-x-0 bottom-0 flex items-center gap-2 px-2 py-2">
+        <Input
+            data-testid="ai-chat-input"
+            name="ai-chat-input"
+            multiline
+            resize
+            sizing="large"
+            label="Assistant chat input"
+            placeholder={tString(language, 'ai_chat_input_placeholder')}
+            onChange={(event) => onChange(event.target.value)}
+            onSubmit={(val) => onSubmit(val as string)}
+            value={value}
+            submitButton={{
+                label: tString(language, 'send'),
+            }}
+            className="animate-blur-in-slow bg-tint-base/9 backdrop-blur-lg contrast-more:bg-tint-base"
+            rows={1}
+            keyboardShortcut={
+                !value && !disabled && !loading
+                    ? {
+                          keys: ['mod', 'i'],
+                          className: 'bg-tint-base group-focus-within/input:hidden',
+                      }
+                    : undefined
+            }
+            disabled={disabled || loading}
+            aria-busy={loading}
+            ref={inputRef}
+            trailing={
                 <HoverCardRoot openDelay={500}>
                     <HoverCard
                         className="max-w-xs bg-tint p-2 text-sm text-tint"
@@ -146,14 +113,7 @@ export function AIChatInput(props: {
                         </div>
                     </HoverCardTrigger>
                 </HoverCardRoot>
-                <Button
-                    label={tString(language, 'send')}
-                    size="medium"
-                    className="ml-auto"
-                    disabled={disabled || !value.trim()}
-                    onClick={() => onSubmit(value)}
-                />
-            </div>
-        </div>
+            }
+        />
     );
 }
diff --git a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
index 9002303ea0..818ea4da40 100644
--- a/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
+++ b/packages/gitbook/src/components/DocumentView/Integration/contentkit.css
@@ -156,8 +156,10 @@
 
 /** Text input */
 .contentkit-textinput {
-    @apply w-full rounded border border-tint text-tint-strong placeholder:text-tint flex resize-none flex-1 px-2 py-1.5 text-sm bg-transparent whitespace-pre-line;
-    @apply focus:outline-primary focus:border-primary;
+    @apply w-full circular-corners:rounded-3xl ring-primary-hover rounded-corners:rounded-lg border border-tint text-tint-strong transition-all placeholder:text-tint/8 flex resize-none flex-1 px-2 py-1.5 text-sm bg-tint-base whitespace-pre-line;
+    @apply shadow-tint/6 depth-subtle:focus-within:-translate-y-px depth-subtle:shadow-sm depth-subtle:focus-within:shadow-lg dark:shadow-tint-1;
+    @apply focus:border-primary-hover focus:shadow-primary-subtle focus:ring-2 hover:border-tint-hover focus:hover:border-primary-hover;
+    @apply disabled:cursor-not-allowed disabled:border-tint-subtle disabled:bg-tint-subtle;
 }
 
 /** Form */
diff --git a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
index 8b70fd78cd..5ea6e8b3b2 100644
--- a/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
+++ b/packages/gitbook/src/components/PageFeedback/PageFeedbackForm.tsx
@@ -6,10 +6,10 @@ import React, { type ButtonHTMLAttributes } from 'react';
 import { useLanguage } from '@/intl/client';
 import { t, tString } from '@/intl/translate';
 import { tcls } from '@/lib/tailwind';
-
 import { useTrackEvent } from '../Insights';
-import { Button, ButtonGroup } from '../primitives';
+import { Button, ButtonGroup, Input } from '../primitives';
 
+const MIN_COMMENT_LENGTH = 3;
 const MAX_COMMENT_LENGTH = 512;
 
 /**
@@ -24,7 +24,6 @@ export function PageFeedbackForm(props: {
     const trackEvent = useTrackEvent();
     const inputRef = React.useRef<HTMLTextAreaElement>(null);
     const [rating, setRating] = React.useState<PageFeedbackRating>();
-    const [comment, setComment] = React.useState('');
     const [submitted, setSubmitted] = React.useState(false);
 
     const onSubmitRating = (rating: PageFeedbackRating) => {
@@ -86,43 +85,21 @@ export function PageFeedbackForm(props: {
                 </ButtonGroup>
             </div>
             {rating ? (
-                <div className="flex flex-col gap-2">
-                    {!submitted ? (
-                        <>
-                            <textarea
-                                ref={inputRef}
-                                name="comment"
-                                className="mx-0.5 max-h-40 min-h-16 grow rounded-sm straight-corners:rounded-none bg-tint-base p-2 ring-1 ring-tint ring-inset placeholder:text-sm placeholder:text-tint contrast-more:ring-tint-12 contrast-more:placeholder:text-tint-strong"
-                                placeholder={tString(languages, 'was_this_helpful_comment')}
-                                aria-label={tString(languages, 'was_this_helpful_comment')}
-                                onChange={(e) => setComment(e.target.value)}
-                                value={comment}
-                                rows={3}
-                                maxLength={MAX_COMMENT_LENGTH}
-                            />
-                            <div className="flex items-center justify-between gap-4">
-                                <Button
-                                    size="small"
-                                    onClick={() => onSubmitComment(rating, comment)}
-                                    label={tString(languages, 'submit')}
-                                />
-                                {comment.length > MAX_COMMENT_LENGTH * 0.8 ? (
-                                    <span
-                                        className={
-                                            comment.length === MAX_COMMENT_LENGTH
-                                                ? 'text-red-500'
-                                                : ''
-                                        }
-                                    >
-                                        {comment.length} / {MAX_COMMENT_LENGTH}
-                                    </span>
-                                ) : null}
-                            </div>
-                        </>
-                    ) : (
-                        <p>{t(languages, 'was_this_helpful_thank_you')}</p>
-                    )}
-                </div>
+                <Input
+                    ref={inputRef}
+                    label={tString(languages, 'was_this_helpful_comment')}
+                    multiline
+                    submitButton
+                    rows={3}
+                    name="page-feedback-comment"
+                    onSubmit={(comment) => onSubmitComment(rating, comment as string)}
+                    maxLength={MAX_COMMENT_LENGTH}
+                    minLength={MIN_COMMENT_LENGTH}
+                    disabled={submitted}
+                    submitMessage={tString(languages, 'was_this_helpful_thank_you')}
+                    className="animate-blur-in"
+                    resize
+                />
             ) : null}
         </div>
     );
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 92e18a4e69..2ed6c66d90 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -1,13 +1,8 @@
 'use client';
-import React from 'react';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
-import { tcls } from '@/lib/tailwind';
-import { Icon } from '@gitbook/icons';
-import { Button, variantClasses } from '../primitives';
-import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
-import { useClassnames } from '../primitives/StyleProvider';
+import { Input } from '../primitives';
 
 interface SearchInputProps {
     onChange: (value: string) => void;
@@ -20,14 +15,11 @@ interface SearchInputProps {
     children?: React.ReactNode;
 }
 
-// Size classes for medium size button
-const sizeClasses = ['text-sm', 'px-3.5', 'py-1.5', '@2xl:circular-corners:px-4'];
-
 /**
  * Input to trigger search.
  */
 export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
-    function SearchInput(props, ref) {
+    function SearchInput(props, containerRef) {
         const {
             onChange,
             onKeyDown,
@@ -42,7 +34,6 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         const inputRef = useRef<HTMLInputElement>(null);
 
         const language = useLanguage();
-        const buttonStyles = useClassnames(['ButtonStyles']);
 
         useEffect(() => {
             if (isOpen) {
@@ -58,74 +49,37 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
         }, [isOpen, value]);
 
         return (
-            <div className={tcls('relative flex size-9 grow', className)}>
-                {/* biome-ignore lint/a11y/useKeyWithClickEvents: this div needs an onClick to show the input on mobile, where it's normally hidden.
-                Normally you'd also need to add a keyboard trigger to do the same without a pointer, but in this case the input already be focused on its own. */}
-                <div
-                    ref={ref}
-                    onClick={onFocus}
-                    className={tcls(
-                        // Apply button styles
-                        buttonStyles,
-                        variantClasses.header,
-                        sizeClasses,
-                        // Additional custom styles
-                        'has-[input:focus]:-translate-y-px h-9 grow @2xl:cursor-text cursor-pointer px-2.5 has-[input:focus]:bg-tint-base has-[input:focus]:depth-subtle:shadow-lg has-[input:focus]:depth-subtle:shadow-primary-subtle has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-primary-hover',
-                        'theme-bold:border-header-link/3 has-[input:focus-visible]:theme-bold:border-header-link/5 has-[input:focus-visible]:theme-bold:bg-header-link/3 has-[input:focus-visible]:theme-bold:ring-header-link/5',
-                        'theme-bold:before:absolute theme-bold:before:inset-0 theme-bold:before:bg-header-background/7 theme-bold:before:backdrop-blur-xl ', // Special overlay to make the transparent colors of theme-bold visible.
-                        '@max-2xl:absolute relative @max-2xl:right-0 z-30 max-w-none shrink grow justify-start',
-                        isOpen ? '@max-2xl:w-56' : '@max-2xl:w-[38px]'
-                    )}
-                >
-                    {value && isOpen ? (
-                        <Button
-                            variant="blank"
-                            label={tString(language, 'clear')}
-                            size="medium"
-                            iconOnly
-                            icon="circle-xmark"
-                            className="-ml-1.5 -mr-1 animate-scale-in px-1.5 theme-bold:text-header-link theme-bold:hover:bg-header-link/3"
-                            onClick={() => {
-                                onChange('');
-                                inputRef.current?.focus();
-                            }}
-                        />
-                    ) : (
-                        <Icon
-                            icon="magnifying-glass"
-                            className="size-4 shrink-0 animate-scale-in"
-                        />
-                    )}
-                    {children}
-                    <input
-                        {...rest}
-                        type="text"
-                        onFocus={onFocus}
-                        onKeyDown={onKeyDown}
-                        onChange={(event) => onChange(event.target.value)}
-                        value={value}
-                        // We only show "search or ask" if the search input actually handles both search and ask.
-                        placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
-                        maxLength={512}
-                        size={10}
-                        data-testid="search-input"
-                        className={tcls(
-                            'peer z-10 min-w-0 grow bg-transparent py-0.5 text-tint-strong theme-bold:text-header-link outline-hidden transition-[width] duration-300 contain-paint placeholder:text-tint theme-bold:placeholder:text-current theme-bold:placeholder:opacity-7',
-                            isOpen ? '' : '@max-2xl:opacity-0'
-                        )}
-                        role="combobox"
-                        autoComplete="off"
-                        aria-autocomplete="list"
-                        aria-haspopup="listbox"
-                        aria-expanded={value && isOpen ? 'true' : 'false'}
-                        // Forward
-                        ref={inputRef}
-                    />
-                    <KeyboardShortcut
-                        keys={isOpen ? ['esc'] : ['mod', 'k']}
-                        className="last:-mr-1 theme-bold:border-header-link/5 theme-bold:bg-header-background theme-bold:text-header-link"
-                    />
-                </div>
+            <div className="relative flex @max-2xl:size-9.5 grow">
+                <Input
+                    data-testid="search-input"
+                    name="search-input"
+                    ref={inputRef}
+                    containerRef={containerRef as React.RefObject<HTMLDivElement | null>}
+                    sizing="medium"
+                    label={tString(language, withAI ? 'search_or_ask' : 'search')}
+                    className="@max-2xl:absolute inset-y-0 right-0 z-30 @max-2xl:max-w-9.5 grow theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link theme-bold:shadow-none! @max-2xl:focus-within:w-56 @max-2xl:focus-within:max-w-[calc(100vw-5rem)] theme-bold:focus-within:border-header-link/6 theme-bold:focus-within:bg-header-link/1 theme-bold:focus-within:ring-header-link/5 theme-bold:hover:border-header-link/5 theme-bold:hover:bg-header-link/1 @max-2xl:has-[input[aria-expanded=true]]:w-56 @max-2xl:has-[input[aria-expanded=true]]:max-w-[calc(100vw-5rem)] @max-2xl:[&_input]:opacity-0 theme-bold:[&_input]:placeholder:text-header-link/8 @max-2xl:focus-within:[&_input]:opacity-11 @max-2xl:has-[input[aria-expanded=true]]:[&_input]:opacity-11 @max-2xl:[&_svg]:ml-0.5 theme-bold:[&_svg]:text-header-link/8"
+                    placeholder={`${tString(language, withAI ? 'search_or_ask' : 'search')}…`}
+                    onFocus={onFocus}
+                    onKeyDown={onKeyDown}
+                    leading="magnifying-glass"
+                    onChange={(event) => {
+                        onChange(event.target.value);
+                    }}
+                    value={value}
+                    maxLength={512}
+                    autoComplete="off"
+                    aria-autocomplete="list"
+                    aria-haspopup="listbox"
+                    aria-expanded={value && isOpen ? 'true' : 'false'}
+                    clearButton
+                    keyboardShortcut={{
+                        className:
+                            'theme-bold:border-header-link/4 theme-bold:bg-header-background theme-bold:text-header-link',
+                        keys: isOpen ? ['esc'] : ['mod', 'k'],
+                    }}
+                    {...rest}
+                    type="text"
+                />
             </div>
         );
     }
diff --git a/packages/gitbook/src/components/primitives/Input.tsx b/packages/gitbook/src/components/primitives/Input.tsx
new file mode 100644
index 0000000000..86b234053b
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/Input.tsx
@@ -0,0 +1,292 @@
+'use client';
+
+import { tString, useLanguage } from '@/intl/client';
+import { tcls } from '@/lib/tailwind';
+import { Icon, type IconName } from '@gitbook/icons';
+import React, { type ReactNode } from 'react';
+import { Button, type ButtonProps } from './Button';
+import { KeyboardShortcut, type KeyboardShortcutProps } from './KeyboardShortcut';
+
+export type InputProps = {
+    label: string;
+    leading?: IconName | React.ReactNode;
+    trailing?: React.ReactNode;
+    sizing?: 'medium' | 'large'; // The `size` prop is already taken by the HTML input element.
+    containerRef?: React.RefObject<HTMLDivElement | null>;
+    /**
+     * A submit button, shown to the right of the input.
+     */
+    submitButton?: boolean | ButtonProps;
+    /**
+     * A message to be shown to the right of the input when the value has been submitted.
+     */
+    submitMessage?: string | ReactNode;
+    /**
+     * A clear button, shown to the left of the input.
+     */
+    clearButton?: boolean | ButtonProps;
+    /**
+     * A keyboard shortcut, shown to the right of the input.
+     */
+    keyboardShortcut?: boolean | KeyboardShortcutProps;
+
+    onSubmit?: (value: string | number | readonly string[] | undefined) => void;
+    resize?: boolean;
+} & (
+    | (React.InputHTMLAttributes<HTMLInputElement> & { multiline?: false })
+    | (React.TextareaHTMLAttributes<HTMLTextAreaElement> & { multiline: true })
+);
+
+type HybridInputElement = HTMLInputElement & HTMLTextAreaElement;
+
+const SIZE_CLASSES = {
+    medium: {
+        container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-lg',
+        input: '-m-2 p-2',
+    },
+    large: {
+        container: 'p-2 circular-corners:rounded-3xl rounded-corners:rounded-xl',
+        input: '-m-2 p-3',
+    },
+};
+
+/**
+ * Input component with core functionality (submitting, clearing, validating) and shared styles.
+ */
+export const Input = React.forwardRef<HTMLInputElement | HTMLTextAreaElement, InputProps>(
+    (props, passedRef) => {
+        const {
+            multiline,
+            value: initialValue,
+            sizing = 'medium',
+            leading,
+            trailing,
+            className,
+            clearButton,
+            submitButton,
+            submitMessage,
+            label,
+            'aria-label': ariaLabel,
+            'aria-busy': ariaBusy,
+            placeholder,
+            keyboardShortcut,
+            disabled,
+            onSubmit,
+            onChange,
+            onKeyDown,
+            containerRef,
+            maxLength,
+            minLength,
+            resize = false,
+            ...rest
+        } = props;
+
+        const [internalValue, setInternalValue] = React.useState(initialValue ?? '');
+        const [submitted, setSubmitted] = React.useState(false);
+        const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+        const ref = passedRef ?? inputRef;
+
+        const language = useLanguage();
+        const isControlled = 'value' in props;
+        const value = isControlled ? (initialValue ?? '') : internalValue;
+        const hasValue = value.toString().trim();
+        const hasValidValue =
+            hasValue &&
+            (maxLength ? value.toString().length <= maxLength : true) &&
+            (minLength ? value.toString().length >= minLength : true);
+
+        const handleChange = (event: React.ChangeEvent<HybridInputElement>) => {
+            const newValue = event.target.value;
+            if (!isControlled) {
+                setInternalValue(newValue);
+            }
+            onChange?.(event);
+
+            // Reset submitted state when user edits the value to allow re-submission
+            if (submitted) {
+                setSubmitted(false);
+            }
+
+            if (multiline && resize && 'current' in ref && ref.current) {
+                ref.current.style.height = 'auto';
+                ref.current.style.height = `${ref.current.scrollHeight}px`;
+            }
+        };
+
+        const handleClear = () => {
+            if (!('current' in ref) || !ref.current) return;
+
+            const syntheticEvent = {
+                target: { value: '' },
+                currentTarget: ref.current,
+            } as React.ChangeEvent<HybridInputElement>;
+
+            handleChange(syntheticEvent);
+        };
+
+        const handleClick = () => {
+            if (!('current' in ref)) return;
+            ref.current?.focus();
+        };
+
+        const handleSubmit = () => {
+            if (hasValue && onSubmit) {
+                onSubmit(value);
+                setSubmitted(true);
+            }
+        };
+
+        const handleKeyDown = (event: React.KeyboardEvent<HybridInputElement>) => {
+            if (event.key === 'Enter' && !event.shiftKey && hasValue) {
+                event.preventDefault();
+                handleSubmit();
+            } else if (event.key === 'Escape') {
+                event.preventDefault();
+                event.currentTarget.blur();
+            }
+            onKeyDown?.(event);
+        };
+
+        const inputClassName = tcls(
+            'peer -m-2 max-h-64 grow resize-none text-left outline-none placeholder:text-tint/8 aria-busy:cursor-progress',
+            SIZE_CLASSES[sizing].input
+        );
+
+        const inputProps = {
+            className: inputClassName,
+            ref: ref as React.Ref<HTMLInputElement | HTMLTextAreaElement>,
+            value: value,
+            onKeyDown: handleKeyDown,
+            'aria-busy': ariaBusy,
+            onChange: handleChange,
+            'aria-label': ariaLabel ?? label,
+            placeholder: placeholder ?? label,
+            disabled: disabled,
+            maxLength: maxLength,
+            minLength: minLength,
+            ...rest,
+        };
+
+        return (
+            <div
+                className={tcls(
+                    'group/input relative flex min-h-min gap-2 overflow-hidden border border-tint bg-tint-base shadow-tint/6 ring-primary-hover transition-all dark:shadow-tint-1',
+                    disabled
+                        ? 'cursor-not-allowed border-tint-subtle bg-tint-subtle opacity-7'
+                        : [
+                              'depth-subtle:focus-within:-translate-y-px depth-subtle:hover:-translate-y-px depth-subtle:shadow-xs',
+                              'focus-within:border-primary-hover focus-within:depth-subtle:shadow-lg focus-within:shadow-primary-subtle focus-within:ring-2 hover:cursor-text hover:border-tint-hover depth-subtle:hover:not-focus-within:shadow-md focus-within:hover:border-primary-hover',
+                          ],
+                    multiline ? 'flex-col' : 'flex-row',
+                    ariaBusy ? 'cursor-progress' : '',
+                    SIZE_CLASSES[sizing].container,
+                    className
+                )}
+                onClick={handleClick}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        handleClick();
+                    }
+                }}
+                ref={containerRef}
+            >
+                <div
+                    className={tcls('flex grow gap-2', multiline ? 'items-start' : 'items-center')}
+                >
+                    {leading ? (
+                        typeof leading === 'string' ? (
+                            <Icon
+                                icon={leading as IconName}
+                                className={tcls(
+                                    'ml-1 size-4 shrink-0 text-tint',
+                                    multiline ? 'my-1.5' : 'my-0.5',
+                                    clearButton && hasValue ? 'group-focus-within/input:hidden' : ''
+                                )}
+                            />
+                        ) : (
+                            leading
+                        )
+                    ) : null}
+                    {clearButton ? (
+                        <Button
+                            variant="blank"
+                            size="medium"
+                            label={tString(language, 'clear')}
+                            iconOnly
+                            icon="circle-xmark"
+                            className={tcls(
+                                '-m-1 -ml-0.5 hidden shrink-0 animate-fade-in p-1.5 text-tint',
+                                multiline ? 'mt-0.5' : '',
+                                hasValue ? 'group-focus-within/input:flex' : ''
+                            )}
+                            onClick={handleClear}
+                        />
+                    ) : null}
+                    {multiline ? (
+                        <textarea
+                            {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
+                        />
+                    ) : (
+                        <input
+                            {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)}
+                            type="text"
+                            size={1}
+                        />
+                    )}
+
+                    {keyboardShortcut !== false ? (
+                        <div className={multiline ? 'absolute top-2.5 right-2.5' : ''}>
+                            {typeof keyboardShortcut === 'object' ? (
+                                <KeyboardShortcut {...keyboardShortcut} />
+                            ) : onSubmit && !submitted && hasValue ? (
+                                <KeyboardShortcut
+                                    keys={['enter']}
+                                    className="hidden bg-tint-base group-focus-within/input:flex"
+                                />
+                            ) : null}
+                        </div>
+                    ) : null}
+                </div>
+                {trailing || submitButton || maxLength ? (
+                    <div className="flex items-center gap-2 empty:hidden">
+                        {trailing}
+                        {maxLength && !submitted && value.toString().length > maxLength * 0.8 ? (
+                            <span
+                                className={tcls(
+                                    'animate-fade-in text-xs',
+                                    value.toString().length >= maxLength
+                                        ? 'text-danger-subtle'
+                                        : 'text-tint-subtle'
+                                )}
+                            >
+                                {value.toString().length} / {maxLength}
+                            </span>
+                        ) : null}
+                        {submitted && submitMessage ? (
+                            typeof submitMessage === 'string' ? (
+                                <div className="ml-auto flex animate-fade-in items-center gap-1 p-1.5 text-success-subtle">
+                                    <Icon icon="check-circle" className="size-4" />
+                                    {submitMessage}
+                                </div>
+                            ) : (
+                                submitMessage
+                            )
+                        ) : submitButton ? (
+                            <Button
+                                variant="primary"
+                                size="medium"
+                                label={tString(language, 'submit')}
+                                onClick={handleSubmit}
+                                icon={multiline ? undefined : 'arrow-right'}
+                                disabled={disabled || !hasValidValue}
+                                iconOnly={!multiline}
+                                className="ml-auto"
+                                {...(typeof submitButton === 'object' ? submitButton : {})}
+                            />
+                        ) : null}
+                    </div>
+                ) : null}
+            </div>
+        );
+    }
+);
diff --git a/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx b/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
index 49705139ac..a6104bf730 100644
--- a/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
+++ b/packages/gitbook/src/components/primitives/KeyboardShortcut.tsx
@@ -1,9 +1,13 @@
 'use client';
 
-import { type ClassValue, tcls } from '@/lib/tailwind';
+import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import * as React from 'react';
 
+export type KeyboardShortcutProps = {
+    keys: string[];
+} & React.HTMLAttributes<HTMLDivElement>;
+
 function getOperatingSystem() {
     const platform = navigator.platform.toLowerCase();
 
@@ -13,7 +17,7 @@ function getOperatingSystem() {
     return 'win';
 }
 
-export function KeyboardShortcut(props: { keys: string[]; className?: ClassValue }) {
+export function KeyboardShortcut(props: KeyboardShortcutProps) {
     const { keys, className } = props;
 
     const [operatingSystem, setOperatingSystem] = React.useState<string | null>(null);
@@ -41,7 +45,7 @@ export function KeyboardShortcut(props: { keys: string[]; className?: ClassValue
                         break;
 
                     case 'enter':
-                        element = <Icon icon="arrow-turn-down-left" className="size-[.75em]" />;
+                        element = <Icon icon="arrow-turn-down-left" className="size-[.9em]" />;
                         break;
                 }
                 return (
diff --git a/packages/gitbook/src/components/primitives/index.ts b/packages/gitbook/src/components/primitives/index.ts
index 83e4ac69ed..74927a29b9 100644
--- a/packages/gitbook/src/components/primitives/index.ts
+++ b/packages/gitbook/src/components/primitives/index.ts
@@ -13,3 +13,4 @@ export * from './Popover';
 export * from './LoadingStateProvider';
 export * from './HoverCard';
 export * from './DropdownMenu';
+export * from './Input';