diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
index 06132bde93e..4fcfe8634f1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number.tsx
@@ -169,6 +169,7 @@ function NumberComponent(props: Props) {
on_blur={handleBlur}
on_change={handleChange}
disabled={disabled}
+ status={error ? 'error' : undefined}
stretch={width !== undefined}
suffix={
help ? (
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
index 7512ad1a661..7f8151b1e1e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
@@ -152,6 +152,7 @@ function StringComponent(props: Props) {
disabled={disabled}
stretch={width !== undefined}
inner_ref={innerRef}
+ status={error ? 'error' : undefined}
/>
) : mask ? (
) : (
)}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
index 0355f898536..3599f165f14 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle.tsx
@@ -88,6 +88,7 @@ function Toggle(props: Props) {
label={label}
checked={isOn}
disabled={disabled}
+ status={error ? 'error' : undefined}
on_change={handleCheckboxChange}
{...pickSpacingProps(props)}
/>
@@ -105,6 +106,7 @@ function Toggle(props: Props) {
}
checked={isOn}
disabled={disabled}
+ status={error ? 'error' : undefined}
value={value ? 'true' : 'false'}
on_change={handleCheckboxChange}
/>
@@ -127,8 +129,8 @@ function Toggle(props: Props) {
text={textOff ?? sharedContext?.translation.Forms.booleanNo}
on_click={setOff}
variant={isOn ? 'secondary' : undefined}
- status={error ? 'error' : undefined}
disabled={disabled}
+ status={error ? 'error' : undefined}
/>
@@ -147,6 +149,7 @@ function Toggle(props: Props) {
}
checked={isOn}
disabled={disabled}
+ status={error ? 'error' : undefined}
value={value ? 'true' : 'false'}
on_change={handleCheckboxChange}
/>
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx
index b00e5be888a..0521ff359a8 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Boolean.test.tsx
@@ -22,6 +22,17 @@ describe('Field.Boolean', () => {
).toBeInTheDocument()
})
+ it('shows error border', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-checkbox')
+ expect(element.className).toContain('dnb-checkbox__status--error')
+ })
+
it('should toggle when clicking', async () => {
const onChange = jest.fn()
render(
@@ -93,6 +104,19 @@ describe('Field.Boolean', () => {
).toBeInTheDocument()
})
+ it('shows error border', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-toggle-button')
+ expect(element.className).toContain(
+ 'dnb-toggle-button__status--error'
+ )
+ })
+
it('should show error when no value is given', () => {
render()
expect(screen.getByRole('alert')).toBeInTheDocument()
@@ -143,6 +167,19 @@ describe('Field.Boolean', () => {
).toBeInTheDocument()
})
+ it('shows error border', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-toggle-button')
+ expect(element.className).toContain(
+ 'dnb-toggle-button__status--error'
+ )
+ })
+
it('should show error when no value is given', () => {
render(
{
).toBeInTheDocument()
})
+ it('shows error border', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-button')
+ expect(element.className).toContain('dnb-button__status--error')
+ })
+
it('should show error when no value is given', () => {
render(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx
index 1ed7feb2b27..b228ebb6a80 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Number.test.tsx
@@ -31,6 +31,12 @@ describe('Field.Number', () => {
).toBeInTheDocument()
})
+ it('shows error border', () => {
+ render()
+ const element = document.querySelector('.dnb-input')
+ expect(element.className).toContain('dnb-input__status--error')
+ })
+
it('formats with given thousandSeparator', () => {
const { rerender } = render(
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
index 0426bfa968a..70621835f8c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
@@ -288,4 +288,15 @@ describe('Selection', () => {
})
})
})
+
+ it('shows error border', () => {
+ render(
+
+ Fooo
+ Baar
+
+ )
+ const element = document.querySelector('.dnb-dropdown')
+ expect(element.className).toContain('dnb-dropdown__status--error')
+ })
})
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
index aa4cbee921a..a59caba6b82 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
@@ -81,6 +81,38 @@ describe('Field.String', () => {
screen.getByText('This is what went wrong')
).toBeInTheDocument()
})
+
+ describe('shows error border', () => {
+ it('for basis input', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-input')
+ expect(element.className).toContain('dnb-input__status--error')
+ })
+
+ it('for masked input', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-input-masked')
+ expect(element.className).toContain('dnb-input__status--error')
+ })
+
+ it('for multiline input', () => {
+ render(
+
+ )
+ const element = document.querySelector('.dnb-textarea')
+ expect(element.className).toContain('dnb-textarea__status--error')
+ })
+ })
})
describe('event handlers', () => {