diff --git a/src/text-field/text-field.test.tsx b/src/text-field/text-field.test.tsx
index 61bff343..2be8cfe0 100644
--- a/src/text-field/text-field.test.tsx
+++ b/src/text-field/text-field.test.tsx
@@ -239,6 +239,17 @@ describe('TextField', () => {
expect(inputElement).toHaveFocus()
})
+ it('forwards exceptionallySetClassName to the underlying input element', () => {
+ render(
+ ,
+ )
+ expect(screen.getByTestId('text-field')).toHaveClass('custom-input-class')
+ })
+
describe('a11y', () => {
it('renders with no a11y violations', async () => {
const { container } = render(
diff --git a/src/text-field/text-field.tsx b/src/text-field/text-field.tsx
index 28819818..9bcb929f 100644
--- a/src/text-field/text-field.tsx
+++ b/src/text-field/text-field.tsx
@@ -8,13 +8,15 @@ import { Box } from '../box'
import styles from './text-field.module.css'
import type { BaseFieldProps, BaseFieldVariantProps, FieldComponentProps } from '../base-field'
+import type { ObfuscatedClassName } from '../utils/common-types'
type TextFieldType = 'email' | 'search' | 'tel' | 'text' | 'url'
interface TextFieldProps
extends Omit, 'type' | 'supportsStartAndEndSlots'>,
BaseFieldVariantProps,
- Pick {
+ Pick,
+ ObfuscatedClassName {
type?: TextFieldType
startSlot?: React.ReactElement | string | number
endSlot?: React.ReactElement | string | number
@@ -45,6 +47,7 @@ const TextField = React.forwardRef(function Te
onChange: originalOnChange,
characterCountPosition = 'below',
endSlotPosition = 'bottom',
+ exceptionallySetClassName,
...props
},
ref,
@@ -107,6 +110,7 @@ const TextField = React.forwardRef(function Te
type={type}
ref={combinedRef}
maxLength={maxLength}
+ className={exceptionallySetClassName}
onChange={(event) => {
originalOnChange?.(event)
onChange?.(event)