diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index fa673d9..7e5dbb8 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -11,6 +11,7 @@ interface InputProps {
   defaultValue?: string;
   placeholder?: string;
   disabled?: boolean;
+  readonly?: boolean;
   onInput?: (value: string | null) => void;
   wrapperClass?: JSX.HTMLAttributes<HTMLDivElement>['class'];
   inputClass?: JSX.HTMLAttributes<HTMLInputElement>['class'];
@@ -21,6 +22,7 @@ const Input: Component<InputProps> = (props) => {
     {
       variant: 'normal',
       disabled: false,
+      readonly: false,
       placeholder: '',
     },
     props,
@@ -38,6 +40,9 @@ const Input: Component<InputProps> = (props) => {
   });
 
   const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (evt) => {
+    if (mProps.readonly || mProps.disabled) {
+      return;
+    }
     const value = evt.currentTarget.value;
     setInternalValue(value);
     mProps.onInput?.(value);
@@ -46,8 +51,9 @@ const Input: Component<InputProps> = (props) => {
   return (
     <div
       aria-disabled={mProps.disabled}
+      aria-readonly={mProps.readonly}
       class={cx(
-        'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5',
+        'flex flex-row items-center gap-2 min-h-[1em] px-3 py-1.5 aria-readonly:cursor-not-allowed',
         mProps.variant === 'normal' &&
           'rounded-sm bg-neutral text-on-neutral aria-disabled:cursor-not-allowed aria-disabled:text-neutral-disabled',
         mProps.variant === 'underlined' &&
@@ -61,6 +67,7 @@ const Input: Component<InputProps> = (props) => {
         type={mProps.type}
         placeholder={mProps.placeholder}
         disabled={mProps.disabled}
+        readonly={mProps.readonly}
         value={internalValue()}
         class={cx(
           'min-h-[1em] grow focus:outline-none placeholder:italic disabled:text-neutral-disabled',