diff --git a/packages/eds-core-react/src/components/Input/Input.docs.mdx b/packages/eds-core-react/src/components/Input/Input.docs.mdx
index 0267ac8c02..db48ceaebe 100644
--- a/packages/eds-core-react/src/components/Input/Input.docs.mdx
+++ b/packages/eds-core-react/src/components/Input/Input.docs.mdx
@@ -58,3 +58,8 @@ Compact `Input` using `EdsProvider`.
+
+### Casted as textarea
+
+
+
diff --git a/packages/eds-core-react/src/components/Input/Input.stories.tsx b/packages/eds-core-react/src/components/Input/Input.stories.tsx
index e016f400fe..d34a53c7b4 100644
--- a/packages/eds-core-react/src/components/Input/Input.stories.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.stories.tsx
@@ -313,3 +313,7 @@ WithAdornments.decorators = [
)
},
]
+
+export const casted: Story = (args) => {
+ return
+}
diff --git a/packages/eds-core-react/src/components/Input/Input.tsx b/packages/eds-core-react/src/components/Input/Input.tsx
index 64dd5b2e1f..d7e1bfbd8c 100644
--- a/packages/eds-core-react/src/components/Input/Input.tsx
+++ b/packages/eds-core-react/src/components/Input/Input.tsx
@@ -12,6 +12,7 @@ import {
spacingsTemplate,
outlineTemplate,
useToken,
+ OverridableComponent,
} from '@equinor/eds-utils'
import { inputToken as tokens } from './Input.tokens'
import type { InputToken } from './Input.tokens'
@@ -128,95 +129,102 @@ export type InputProps = {
leftAdornments?: ReactNode
/** Right adornments */
rightAdornments?: ReactNode
+ /** Cast the input to another element */
+ as?: 'input' | 'textarea'
} & InputHTMLAttributes
-export const Input = forwardRef(function Input(
- {
- variant,
- disabled = false,
- type = 'text',
- leftAdornments,
- rightAdornments,
- readOnly,
- className,
- style,
- ...other
- },
- ref,
-) {
- const inputVariant = tokens[variant] ? tokens[variant] : tokens.input
- const { density } = useEds()
- const token = useToken({ density }, inputVariant)()
-
- const [rightAdornmentsRef, setRightAdornmentsRef] = useState()
- const [leftAdornmentsRef, setLeftAdornmentsRef] = useState()
-
- const rightAdornmentsWidth = useCallback(() => {
- if (rightAdornmentsRef) {
- return rightAdornmentsRef.offsetWidth
+export const Input: OverridableComponent =
+ forwardRef(function Input(
+ {
+ variant,
+ disabled = false,
+ type = 'text',
+ leftAdornments,
+ rightAdornments,
+ readOnly,
+ className,
+ style,
+ ...other
+ },
+ ref,
+ ) {
+ const inputVariant = tokens[variant] ? tokens[variant] : tokens.input
+ const { density } = useEds()
+ const token = useToken({ density }, inputVariant)()
+
+ const [rightAdornmentsRef, setRightAdornmentsRef] =
+ useState()
+ const [leftAdornmentsRef, setLeftAdornmentsRef] = useState()
+
+ const rightAdornmentsWidth = useCallback(() => {
+ if (rightAdornmentsRef) {
+ return rightAdornmentsRef.offsetWidth
+ }
+ return 0
+ }, [rightAdornmentsRef])()
+
+ const leftAdornmentsWidth = useCallback(() => {
+ if (leftAdornmentsRef) {
+ return leftAdornmentsRef.offsetWidth
+ }
+ return 0
+ }, [leftAdornmentsRef])()
+
+ const updatedToken = useCallback(
+ (): ComponentToken => ({
+ ...token,
+ spacings: {
+ ...token.spacings,
+ left: `${leftAdornmentsWidth + parseInt(token.spacings.left)}px`,
+ right: `${rightAdornmentsWidth + parseInt(token.spacings.right)}px`,
+ },
+ }),
+ [leftAdornmentsWidth, rightAdornmentsWidth, token],
+ )()
+
+ const inputProps = {
+ ref,
+ type,
+ disabled,
+ readOnly,
+ token: updatedToken,
+ style: {
+ resize: style?.resize,
+ },
+ ...other,
}
- return 0
- }, [rightAdornmentsRef])()
- const leftAdornmentsWidth = useCallback(() => {
- if (leftAdornmentsRef) {
- return leftAdornmentsRef.offsetWidth
+ const containerProps = {
+ disabled,
+ readOnly,
+ className,
+ style,
+ token: updatedToken,
}
- return 0
- }, [leftAdornmentsRef])()
-
- const updatedToken = useCallback(
- (): ComponentToken => ({
- ...token,
- spacings: {
- ...token.spacings,
- left: `${leftAdornmentsWidth + parseInt(token.spacings.left)}px`,
- right: `${rightAdornmentsWidth + parseInt(token.spacings.right)}px`,
- },
- }),
- [leftAdornmentsWidth, rightAdornmentsWidth, token],
- )()
- const inputProps = {
- ref,
- type,
- disabled,
- readOnly,
- token: updatedToken,
- ...other,
- }
-
- const containerProps = {
- disabled,
- readOnly,
- className,
- style,
- token: updatedToken,
- }
-
- const leftAdornmentProps = {
- ref: setLeftAdornmentsRef,
- token: updatedToken,
- }
- const rightAdornmentProps = {
- ref: setRightAdornmentsRef,
- token: updatedToken,
- }
-
- return (
- // Not using because of cascading styling messing with adornments
-
- {leftAdornments ? (
-
- {leftAdornments}
-
- ) : null}
-
- {rightAdornments ? (
-
- {rightAdornments}
-
- ) : null}
-
- )
-})
+ const leftAdornmentProps = {
+ ref: setLeftAdornmentsRef,
+ token: updatedToken,
+ }
+ const rightAdornmentProps = {
+ ref: setRightAdornmentsRef,
+ token: updatedToken,
+ }
+
+ return (
+ // Not using because of cascading styling messing with adornments
+
+ {leftAdornments ? (
+
+ {leftAdornments}
+
+ ) : null}
+
+ {rightAdornments ? (
+
+ {rightAdornments}
+
+ ) : null}
+
+ )
+ })