diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
index 08d9c0f6c..68a760064 100644
--- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -73,6 +73,7 @@ export default function FormContent() {
label={zipCode}
name="address.zipCode"
registerOptions={{ required: true }}
+ inputMode="numeric"
/>
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
index 5d57c889e..21dbf6f1b 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
@@ -134,6 +134,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
isInvalid={fieldState.invalid}
onBlur={field.onBlur}
defaultSelectedKey={dateValue?.day}
+ inputMode="numeric"
data-testid={DateName.day}
/>
@@ -166,6 +167,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
isInvalid={fieldState.invalid}
onBlur={field.onBlur}
defaultSelectedKey={dateValue?.year}
+ inputMode="numeric"
data-testid={DateName.year}
/>
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
index 18a737e44..a7b538631 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
@@ -31,6 +31,7 @@ const Input = forwardRef(function Input(
registerOptions = {},
type = "text",
hideError,
+ inputMode,
},
ref
) {
@@ -74,6 +75,7 @@ const Input = forwardRef(function Input(
readOnly={readOnly}
required={!!registerOptions.required}
type={type}
+ inputMode={inputMode}
/>
{helpText && !fieldState.error ? (
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index 473798b51..7c80e1b4a 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/packages/design-system/lib/components/Select/SelectFilter.tsx
@@ -93,6 +93,7 @@ export function SelectFilter({
onFocus = () => undefined,
onBlur = () => undefined,
autoComplete,
+ inputMode,
...props
}: SelectFilterProps) {
const [focus, setFocus] = useState(false)
@@ -146,6 +147,7 @@ export function SelectFilter({
ref={inputRef}
className={styles.input}
autoComplete={autoComplete}
+ inputMode={inputMode}
/>
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index f5351c6da..027f506d1 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/packages/design-system/lib/components/Select/types.ts
@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react'
+import { ComponentProps, InputHTMLAttributes } from 'react'
import { ComboBox, Key, ListBoxItem, Select } from 'react-aria-components'
import { MaterialIconProps } from '../Icons/MaterialIcon'
@@ -26,7 +26,8 @@ export interface SelectItemProps extends ComponentProps {
}
export interface SelectFilterProps extends ComponentProps {
- autoComplete?: string
+ autoComplete?: InputHTMLAttributes['autoComplete']
+ inputMode?: InputHTMLAttributes['inputMode']
icon?: MaterialIconProps['icon']
itemIcon?: MaterialIconProps['icon']
items: Item[]