@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/components/button-link/basic.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { KolButtonLink } from '@public-ui/react';
+import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -21,6 +21,8 @@ export const ButtonLinkBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<section className="text-base">
+				<KolHeading _level={2} _label="Button-Link with _inline" />
+
 				<p>
 					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
 					<strong>inline element</strong>.
@@ -35,14 +37,19 @@ export const ButtonLinkBasic: FC = () => {
 					<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
 					Therefore, I go over the entire width of the parent element to create a line break.
 				</p>
+
+				<KolHeading _level={2} _label="Button-Link with _inline={false}" />
+
+				<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>
+
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _disabled />
+					<KolButtonLink _label="Disabled ButtonLink" _disabled _inline={false} />
 				</p>
 				<p>
-					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} />
+					<KolButtonLink _label="With access key" _accessKey="c" _inline={false} _on={dummyEventHandler} />
 				</p>
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" />
+					<KolButtonLink _label="Disabled ButtonLink" _inline={false} _shortKey="s" />
 				</p>
 			</section>
 		</>

package/src/components/button-link/icons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolButtonLink } from '@public-ui/react';
+import { KolButtonLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -12,7 +12,7 @@ export const ButtonLinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+			<KolButtonLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" />
 			<KolButtonLink
 				_icons={{
 					right: 'codicon codicon-home',
@@ -40,6 +40,7 @@ export const ButtonLinkIcons: FC = () => (
 				}}
 				_label="I am a link with all icons"
 			/>
+			<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="I am a link with icon only" />
 		</div>
 	</>
 );

package/src/components/button-link/image.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolButtonLink } from '@public-ui/react';
+import { KolButtonLink } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/button-link/routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
+import { ButtonLinkAriaDescription } from './aria-description';
 import { ButtonLinkBasic } from './basic';
 import { ButtonLinkIcons } from './icons';
 import { ButtonLinkImage } from './image';
-import { ButtonLinkAriaDescription } from './aria-description';
 
 export const BUTTON_LINK_ROUTES: Routes = {
 	'button-link': {

package/src/components/card/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolCard } from '@public-ui/react';
+import { KolCard } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/card/headlines.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardHeadlines: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows cards with all headline levels as title.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with headline level 0" _level={0}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 1" _level={1}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 2" _level={2}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 3" _level={3}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 4" _level={4}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 5" _level={5}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 6" _level={6}>
+					<div>Card contents.</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { CardBasic } from './basic';
+import { CardHeadlines } from './headlines';
 
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
+		headlines: CardHeadlines,
 	},
 };

package/src/components/combobox/basic.tsx

@@ -1,21 +1,16 @@
 import type { FC } from 'react';
-import { useContext } from 'react';
 import React from 'react';
 import { FormWrap } from '../FormWrap';
-import { ComboboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
-import { KolBadge } from '@public-ui/react';
-import { HideMenusContext } from '../../shares/HideMenusContext';
+import { ComboboxVariants } from './partials/variants';
 export const ComboboxBasic: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
 			<SampleDescription>
 				<p>KolCombobox combines a text input with a suggestion list, enabling users to either type in a value or to select on of the suggestions.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
-			<FormWrap RefComponent={ComboboxVariants} />
+			<FormWrap RefComponent={ComboboxVariants} showButtons={false} />
 		</>
 	);
 };

package/src/components/combobox/html.tsx

@@ -0,0 +1,16 @@
+import { KolCombobox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ComboboxHtml: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>A HTML only KolCombobox.</p>
+			</SampleDescription>
+
+			<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" />
+		</>
+	);
+};

package/src/components/combobox/partials/cases.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { KolCombobox } from '@public-ui/react';
+import { KolCombobox } from '@public-ui/react-v19';
 
+import type { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 
 export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/partials/variants.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
 import type { Components } from '@public-ui/components';
+import React from 'react';
 
+import { SampleColumns } from '../../SampleColumns';
 import { ComboboxCases } from './cases';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (
-		<div className="w-full grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Text</legend>
 				<ComboboxCases {...props} />
@@ -14,6 +15,6 @@ export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 				<legend>Text (hideLabel)</legend>
 				<ComboboxCases {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 };

package/src/components/combobox/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
+import { ComboboxHtml } from './html';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
+		html: ComboboxHtml,
 	},
 };

package/src/components/details/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolDetails } from '@public-ui/react';
+import { KolDetails } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/drawer/basic.tsx

@@ -1,60 +1,62 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useContext, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { HideMenusContext } from '../../shares/HideMenusContext';
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolBadge } from '@public-ui/react';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';
-
 export const DrawerBasic: FC = () => {
 	const [searchParams] = useSearchParams();
 	const defaultAlign = searchParams.get('align') as AlignPropType;
-	const hideMenus = useContext(HideMenusContext);
+	const defaultCloser = searchParams.get('closer') === 'true';
 	const drawerElement = useRef<HTMLKolDrawerElement>(null);
-	const drawerModalElement = useRef<HTMLKolDrawerElement>(null);
+
 	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
+	const [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);
+
 	useEffect(() => {
 		if (defaultAlign) {
-			drawerModalElement.current?.open();
+			drawerElement.current?.open();
 		}
 	}, [defaultAlign]);
 	return (
 		<>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
-				<p>
-					KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments and the modal- and
-					non-modal modes.
-				</p>
+				<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>
 			</SampleDescription>
 
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+
+			<KolInputCheckbox
+				_label="Drawer has closer"
+				className="mb-4"
+				_checked={hasCloser}
+				_on={{
+					onInput: (_, value) => {
+						setHasCloser((value as null | boolean) === true);
+					},
+				}}
+			/>
+
 			<div className="flex flex-wrap gap-4">
-				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
-				</KolDrawer>
-				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 				<KolDrawer
-					ref={drawerModalElement}
-					_modal
+					ref={drawerElement}
+					_label="I am a drawer"
 					_align={align}
-					_label="I am a Drawer Modal"
-					_on={{ onClose: () => console.log('Drawer Modal onClose triggered!') }}
+					_hasCloser={hasCloser}
+					_on={{ onClose: () => console.log('Drawer onClose triggered!') }}
 				>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
+					<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>
+						<p className="mt-0">
+							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+							voluptua.
+						</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+					</div>
 				</KolDrawer>
-				<KolButton _label="Open drawer as modal" _on={{ onClick: () => drawerModalElement.current?.open() }} />
+				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 			</div>
 		</>
 	);

package/src/components/drawer/controlled.tsx

@@ -1,10 +1,9 @@
 import type { FC } from 'react';
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { HideMenusContext } from '../../shares/HideMenusContext';
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolBadge } from '@public-ui/react';
+import { KolButton, KolDrawer } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';
@@ -12,13 +11,10 @@ import { DrawerRadioAlign } from './partials/align';
 export const DrawerControlled: FC = () => {
 	const [searchParams] = useSearchParams();
 	const defaultAlign = searchParams.get('align') as AlignPropType;
-	const hideMenus = useContext(HideMenusContext);
 	const [open, setOpen] = useState(false);
-	const [modalOpen, setModalOpen] = useState(false);
 	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
 	return (
 		<div>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
 				<p>
 					This sample shows the KolDrawer controlled by the property <code>_open</code> instead of methods.
@@ -34,13 +30,6 @@ export const DrawerControlled: FC = () => {
 					</div>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => setOpen(true) }} />
-				<KolDrawer _open={modalOpen} _modal _align={align} _label="I'm a controlled modal drawer" _on={{ onClose: () => setModalOpen(false) }}>
-					<div>
-						<p>Lorem ipsum dolor sit amet,</p>
-						<KolButton _label="Close drawer" _on={{ onClick: () => setModalOpen(false) }} />
-					</div>
-				</KolDrawer>
-				<KolButton _label="Open drawer as modal" _on={{ onClick: () => setModalOpen(true) }} />
 			</div>
 		</div>
 	);

package/src/components/drawer/partials/align.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolInputRadio } from '@public-ui/react';
+import { KolInputRadio } from '@public-ui/react-v19';
 
 import type { AlignPropType } from '@public-ui/components';
 

package/src/components/drawer/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../../shares/types';
 import { DrawerBasic } from './basic';
 import { DrawerControlled } from './controlled';
+import { DrawerScrolled } from './scrolled';
 
 export const DRAWER_ROUTES: Routes = {
 	drawer: {
 		basic: DrawerBasic,
 		controlled: DrawerControlled,
+		scrolled: DrawerScrolled,
 	},
 };

package/src/components/drawer/scrolled.tsx

@@ -0,0 +1,133 @@
+// DrawerScrolled Class
+
+import type { AlignPropType } from '@public-ui/components';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useRef, useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { DrawerRadioAlign } from './partials/align';
+
+export const DrawerScrolled: FC = () => {
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+	const [align, setAlign] = useState<AlignPropType>('bottom');
+	const [useOverflowHandling, setUseOverflowHandling] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how KolDrawer handles content that exceeds the drawer dimensions and shows the correct way to handle overflow. Use the
+					&#34;Enable Overflow Handling&#34; toggle to see the difference between problematic behavior (content exceeding drawer bounds) and the proper solution
+					(overflow handling within the slot content).
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4 mb-4">
+				<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+				<KolInputCheckbox
+					_label="Enable Overflow Handling (Recommended)"
+					_checked={useOverflowHandling}
+					_on={{ onChange: (_, value) => setUseOverflowHandling(!!value) }}
+				/>
+			</div>
+			<div className="flex flex-wrap gap-4">
+				<KolDrawer ref={drawerElement} _label="Scrollable Drawer" _align={align}>
+					{useOverflowHandling ? (
+						// ✅ Correct approach: Outer container with fixed dimensions and overflow handling
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '90vw' : undefined,
+								height: align === 'top' || align === 'bottom' ? '90vh' : undefined,
+								overflow: 'auto',
+								padding: '0',
+								border: '1px solid #999',
+							}}
+						>
+							<div
+								style={{
+									width: align === 'left' || align === 'right' ? '150vw' : undefined,
+									height: align === 'top' || align === 'bottom' ? '150vh' : undefined,
+									background:
+										'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+									backgroundSize: '20px 20px',
+									backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+									border: '2px dashed #ccc',
+									padding: '20px',
+									display: 'flex',
+									flexDirection: 'column',
+									gap: '20px',
+								}}
+							>
+								<p>✅ Content with proper overflow handling - scrollable within drawer bounds</p>
+								<div>
+									<h3>Large Content Area (Scrollable)</h3>
+									<p>
+										Container: {align === 'left' || align === 'right' ? '400px wide' : '90vw wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '90vh high' : '400px high'}
+									</p>
+									<p>
+										Content: {align === 'left' || align === 'right' ? '150vw wide' : '400px wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '150vh high' : '400px high'}
+									</p>
+									<p>
+										<strong>Overflow Handling:</strong> Enabled - Container has fixed size with overflow: auto
+									</p>
+									<p>
+										Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+										diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+										dolor sit amet.
+									</p>
+									<p>
+										With overflow handling enabled, this content scrolls properly within the drawer container. You can scroll horizontally/vertically to see all
+										content.
+									</p>
+									<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+										<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+									</div>
+								</div>
+							</div>
+						</div>
+					) : (
+						// ❌ Problematic approach: Content directly exceeds drawer bounds
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '150vw' : '400px',
+								height: align === 'top' || align === 'bottom' ? '150vh' : '400px',
+								background:
+									'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+								backgroundSize: '20px 20px',
+								backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+								border: '2px dashed #ccc',
+								padding: '20px',
+								display: 'flex',
+								flexDirection: 'column',
+								gap: '20px',
+							}}
+						>
+							<p>❌ Content exceeding drawer bounds - problematic behavior</p>
+							<div>
+								<h3>Large Content Area</h3>
+								<p>Width: {align === 'left' || align === 'right' ? '150vw (exceeds drawer width)' : '400px'}</p>
+								<p>Height: {align === 'top' || align === 'bottom' ? '150vh (exceeds drawer height)' : '400px'}</p>
+								<p>
+									<strong>Overflow Handling:</strong> Disabled - Content extends beyond drawer boundaries
+								</p>
+								<p>
+									Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+									diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
+									dolor sit amet.
+								</p>
+								<p>Without overflow handling, this content may extend beyond the drawer boundaries, causing layout issues.</p>
+								<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+									<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+								</div>
+							</div>
+						</div>
+					)}
+				</KolDrawer>
+
+				<KolButton _label="Open scrollable drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
+			</div>
+		</>
+	);
+};

package/src/components/form/basic.tsx

@@ -1,7 +1,7 @@
+import { KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
 
 export const FormBasic: FC = () => (
 	<>

package/src/components/form/error-list.tsx

@@ -1,28 +1,70 @@
+import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
 
-export const FormErrorList: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows a form with error messages.</p>
-		</SampleDescription>
+export const FormErrorList: FC = () => {
+	const formRef = useRef<HTMLKolFormElement | null>(null);
 
-		<KolForm
-			className="w-full"
-			_errorList={[
-				{
-					message: 'Error in Input 2',
-					selector: '#input2',
-				},
-			]}
-		>
-			<div className="grid gap-2">
-				<KolInputText id="input1" _label="Input 1" />
-				<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-				<KolInputText id="input3" _label="Input 3" />
-			</div>
-		</KolForm>
-	</>
-);
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows a form with error messages.</p>
+			</SampleDescription>
+
+			<KolForm
+				className="w-full"
+				ref={formRef}
+				_on={{
+					onSubmit: scrollTo,
+				}}
+				_errorList={[
+					{
+						message: 'Error in Input 2',
+						selector: '#input2',
+					},
+					{
+						message: 'Error in Input 3',
+						selector: () => alert('Error in Input 3'),
+					},
+				]}
+			>
+				<div className="grid gap-2">
+					<KolInputText id="input1" _label="Input 1" />
+					<KolInputText
+						id="input2"
+						_label="Input 2"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<KolInputText
+						id="input3"
+						_label="Input 3"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<div>
+						<KolButton _label="ScrollTo" _type="submit" />
+					</div>
+				</div>
+			</KolForm>
+		</>
+	);
+};