diff --git a/src/components/form/FormError.stories.mdx b/src/components/form/FormError.stories.mdx
new file mode 100644
index 00000000..e2231c42
--- /dev/null
+++ b/src/components/form/FormError.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import { FormError } from './FormError'
+
+
+
+# FormError
+
+This component is a variation of the [Alert](/docs/components-alert-alert--default-story) component.
+Its main purpose is to show an error in a form. The default style applies `col-span-2`, so that the error message is shown in one line in `SectionContentTwoColumn` forms.
+
+export const Template = ({ children, ...args }) => (
+ {children}
+)
+
+
+
+### Props
+
+
+
+### Theme
+
+- `form.formError.base`: Defines base styles of container
diff --git a/src/components/form/FormError.tsx b/src/components/form/FormError.tsx
new file mode 100644
index 00000000..42b9c262
--- /dev/null
+++ b/src/components/form/FormError.tsx
@@ -0,0 +1,12 @@
+import { useTheme } from '../../framework/theme/ThemeContext'
+import { Alert, Tone } from '../alert'
+
+export const FormError: React.FC = ({ children }) => {
+ const { form } = useTheme()
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/framework/theme/theme.ts b/src/framework/theme/theme.ts
index d977aa15..abb03e04 100644
--- a/src/framework/theme/theme.ts
+++ b/src/framework/theme/theme.ts
@@ -21,6 +21,9 @@ export type OverrideTheme = RecursivePartial & {
export const defaultTheme = {
form: {
+ formError: {
+ base: 'col-span-2',
+ },
input: {
base: 'block w-full border p-3 focus:ring-0 appearance-none outline-none rounded-md',
normal: