@public-ui/sample-react 2.0.8 → 2.0.10

package/src/components/input-checkbox/switch.tsx

@@ -1,7 +1,20 @@
 import type { FC } from 'react';
 import React from 'react';
-
-import { FormWrap } from '../FormWrap';
+import { SampleDescription } from '../SampleDescription';
 import { InputCheckboxVariants } from './partials/variants';
+import { FormWrap } from '../FormWrap';
 
-export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;
+export const InputCheckboxSwitch: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				{' '}
+				Hier werden verschiedene Checkboxen mit betiteltem Wunschausgangsverhalten angezeigt. Die Checkbox &apos;Nicht ausgewählt&apos; ist Standardmäßig nicht
+				ausgewählt usw. Die Buttons unten haben keine direkte Funktion, außer, dass Sie ausgewählt werden können. Der Unterschied zwischen der linken und
+				Rechten Darstellung ist, dass erst nach anklicken im Rechten Teil ein Label angezeigt wird. In diesem Beispiel sind die Checkboxen als Switches
+				dargestellt.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />
+	</>
+);

package/src/components/input-color/basic.tsx

@@ -3,5 +3,16 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputColorVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputColorBasic: FC = () => <FormWrap RefComponent={InputColorVariants} />;
+export const InputColorBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind verschiedene Formular-Felder mit Farben angezeigt. Links mit Label, Rechts nur nach anklicken mit Label. Die Farben können verändert werden.
+				Die Buttons unten haben keine direkte Funktion. Sie können angeklickt werden.{' '}
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputColorVariants} />
+	</>
+);

package/src/components/input-color/partials/cases.tsx

@@ -10,14 +10,20 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 		<div className="grid gap-4">
 			<KolInputColor
 				{...props}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_icons={{
 					left: 'codicon codicon-symbol-color',
 				}}
 				_label="Color"
 				_value="#f08080"
 			/>
-			<KolInputColor {...props} _error={ERROR_MSG} _label="Color with error" _suggestions="['#000000','#f08080', '#0000ff','#00ff00']" _touched />
+			<KolInputColor
+				{...props}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_label="Color with error"
+				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
+				_touched
+			/>
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
 		</div>

package/src/components/input-date/basic.tsx

@@ -3,5 +3,18 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputDateVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputDateBasic: FC = () => <FormWrap RefComponent={InputDateVariants} />;
+export const InputDateBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier sieht man ein Formularfeld mit verschiedenen Zeiteingaben. Bei Datumseingabe kann ein Datum in einem Kalender ausgewählt werden, aber auch
+				eingetippt werden. Es gibt ein gleiches Verhalten im nächsten Feld. Die Felder Monat und Woche sind Freitextfelder. Im Feld Zeit können nur Werte von 0
+				bis 23 und 0 bis 59 angegeben werden. Mit den Feldern Zahleneingabe gibt es keine Interaktionsmöglichekeit. Ein gleiches Verhalten gibt es im Rechten
+				Feld, hier werden die Label erst nach anklicken angezeigt.{' '}
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputDateVariants} />
+	</>
+);

package/src/components/input-date/partials/cases.tsx

@@ -10,7 +10,15 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 		<div className="grid gap-4">
 			<KolInputDate {...props} _type="date" _label="Datumseingabe" _required />
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
-			<KolInputDate {...props} _step={1} _type="datetime-local" _error={ERROR_MSG} _label="Local-Datetime (mit Sekunden)" _required _touched />
+			<KolInputDate
+				{...props}
+				_step={1}
+				_type="datetime-local"
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_label="Local-Datetime (mit Sekunden)"
+				_required
+				_touched
+			/>
 			<KolInputDate {...props} _type="month" _label="Monat" _required />
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Woche" _required />
 			<KolInputDate {...props} _type="time" _label="Zeit (Standard)" _required />

package/src/components/input-email/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputEmailVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputEmailBasic: FC = () => <FormWrap RefComponent={InputEmailVariants} />;
+export const InputEmailBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier verstehe ich es nicht. (Fehlermeldung bei Standard.) </p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputEmailVariants} />
+	</>
+);

package/src/components/input-email/partials/cases.tsx

@@ -8,7 +8,7 @@ import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputEmail {...props} _required _value="test@mail.de" _error={ERROR_MSG} _label="E-Mail" />
+			<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail" />
 			<KolInputEmail
 				{...props}
 				ref={ref}
@@ -16,7 +16,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (Liste)"
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{
 					left: {

package/src/components/input-file/basic.tsx

@@ -3,5 +3,16 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputFileVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputFileBasic: FC = () => <FormWrap RefComponent={InputFileVariants} />;
+export const InputFileBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier können einzelne oder mehrere Files ausgewählt werden. Bei &apos;Datei hochladen&apos; wird der Name der ausgewählten Datei angezeigt. Bei
+				&apos;Datei hochladen (Multiple)&apos; werden die Anzahl der ausgewählten Dateien angezeigt.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputFileVariants} />
+	</>
+);

package/src/components/input-file/partials/cases.tsx

@@ -11,7 +11,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			<KolInputFile
 				{...props}
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Datei hochladen"
 				_icons={{
 					left: {
@@ -20,7 +20,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				}}
 				_touched
 			/>
-			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _error={ERROR_MSG} _label="Datei hochladen (Multiple)" />
+			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Datei hochladen (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Datei hochladen (Disabled)" />
 		</div>
 	);

package/src/components/input-number/partials/cases.tsx

@@ -11,7 +11,7 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 			<KolInputNumber
 				{...props}
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_placeholder="Mit Icons"
 				_label="Zahleneingabe"

package/src/components/input-password/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputPasswordVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputPasswordBasic: FC = () => <FormWrap RefComponent={InputPasswordVariants} />;
+export const InputPasswordBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind Passwort Eingabefelder dargestellt. Im Feld &apos;Passwort P&apos; eingegebene Zeichen werden verdeckt angezeigt.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputPasswordVariants} />
+	</>
+);

package/src/components/input-password/partials/cases.tsx

@@ -8,14 +8,14 @@ import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputPassword {...props} _disabled _error={ERROR_MSG} _label="Passwort (Disabled)" _touched />
+			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword
 				{...props}
 				ref={ref}
 				_accessKey="P"
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_label="Passwort"
 				_icons={{

package/src/components/input-password/show-password.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { KolForm, KolInputPassword } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputPasswordShowPassword: FC = () => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -17,25 +18,33 @@ export const InputPasswordShowPassword: FC = () => {
 	}, [isPasswordVisible]);
 
 	return (
-		<KolForm>
-			<KolInputPassword
-				_placeholder="Mit 'Passwort anzeigen' Button"
-				_label="Passwort"
-				ref={passwordRef}
-				_smartButton={{
-					_icons: {
-						left: {
-							icon: 'codicon codicon-eye',
+		<>
+			<SampleDescription>
+				<p>
+					Hier wird ein Passwort Eingabefeld angezeigt. Durch klicken auf den im Feld Rechts stehenden Button, kann zwischen verdecktem und angezeigtem Passwort
+					gewechselt werden.
+				</p>
+			</SampleDescription>
+			<KolForm>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
 						},
-					},
-					_hideLabel: true,
-					_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
-					_on: {
-						onClick: handleTogglePasswordClick,
-					},
-				}}
-				className="block"
-			/>
-		</KolForm>
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+				/>
+			</KolForm>
+		</>
 	);
 };

package/src/components/input-radio/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputRadioVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputRadioBasic: FC = () => <FormWrap RefComponent={InputRadioVariants} />;
+export const InputRadioBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind Radio-Buttons in verschiedenen Ausführungen angezeigt. Es kann immer nur einer der drei Radio-Buttons gleichzeitig angeklickt werden.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputRadioVariants} />
+	</>
+);

package/src/components/input-radio/objectValue.tsx

@@ -0,0 +1,37 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolForm, KolInputRadio } from '@public-ui/react';
+
+import { SampleDescription } from '../SampleDescription';
+
+export const InputRadioObjectValue: FC = () => {
+	const options = [
+		{ label: 'Field 1', value: { id: 1, name: 'Option 1' } },
+		{ label: 'Field 2', value: { id: 2, name: 'Option 2' } },
+	];
+
+	return (
+		<div className="grid gap-4">
+			<SampleDescription>
+				Examples of implementing the <code>KolInputRadio</code> component with object-based preselected value and undefined value.
+			</SampleDescription>
+			<p>
+				In this example for <code>KolInputRadio</code>, the values of the options are defined as objects.
+			</p>
+			<KolForm>
+				<div className="container my-4 d-grid gap-4">
+					<KolInputRadio _value={options[1].value} _options={options} _label="Test(with object value)" />
+				</div>
+			</KolForm>
+			<p>
+				In this example for <code>KolInputRadio</code>, no value is set.
+			</p>
+			<KolForm>
+				<div className="container my-4 d-grid gap-4">
+					<KolInputRadio _options={options} _label="Test(without value)" />
+				</div>
+			</KolForm>
+		</div>
+	);
+};

package/src/components/input-radio/partials/cases.tsx

@@ -16,7 +16,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 			<KolInputRadio
 				{...props}
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_value="Firma"
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)','value':'Herr'},{'label':'Firma','value':'Firma'}]"
@@ -37,7 +37,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_disabled
 				_orientation="horizontal"
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_value="Firma"
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"

package/src/components/input-radio/routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { InputRadioBasic } from './basic';
 import { InputRadioHorizontal } from './horizontal';
 import { InputRadioSelect } from './select';
+import { InputRadioObjectValue } from './objectValue';
 
 export const INPUT_RADIO_ROUTES: Routes = {
 	'input-radio': {
 		basic: InputRadioBasic,
 		horizontal: InputRadioHorizontal,
 		select: InputRadioSelect,
+		object: InputRadioObjectValue,
 	},
 };

package/src/components/input-radio/select.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolForm, KolInputRadio } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../shares/constants';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
@@ -13,7 +14,12 @@ const options = [
 ];
 
 export const InputRadioSelect: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputRadio _error={ERROR_MSG} _options={options} _label="Anrede" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel Radio-Button. Nur eine gleichzeitige Auswahl ist möglich. </p>
+		</SampleDescription>
+		<KolForm className="grid gap-4">
+			<KolInputRadio _msg={{ _type: 'error', _description: ERROR_MSG }} _options={options} _label="Anrede" />
+		</KolForm>
+	</>
 );

package/src/components/input-range/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputRangeVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputRangeBasic: FC = () => <FormWrap RefComponent={InputRangeVariants} />;
+export const InputRangeBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Schieberegler mit Schalter am Rand. Der Wert kann von 0 bis 50 verändert werden.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputRangeVariants} />
+	</>
+);

package/src/components/input-range/partials/cases.tsx

@@ -12,7 +12,7 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				{...props}
 				_min={0}
 				_max={50}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Schieberegler"
 				_icons={{
 					left: {
@@ -24,7 +24,17 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				}}
 				_touched
 			/>
-			<KolInputRange {...props} ref={ref} _accessKey="F" _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler mit Fehler" _touched />
+			<KolInputRange
+				{...props}
+				ref={ref}
+				_accessKey="F"
+				_min={0}
+				_max={50}
+				_step={10}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_label="Schieberegler mit Fehler"
+				_touched
+			/>
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Schieberegler (disabled)" />
 		</div>
 	);

package/src/components/input-text/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputTextVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputTextBasic: FC = () => <FormWrap RefComponent={InputTextVariants} />;
+export const InputTextBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind verschiedene Freitexteingabefelder.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputTextVariants} />
+	</>
+);

package/src/components/input-text/blur.tsx

@@ -1,16 +1,21 @@
-import React from 'react';
-
 import { KolForm, KolInputText } from '@public-ui/react';
-
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
 import type { FC } from 'react';
+
 export const InputTextBlur: FC = () => (
-	<KolForm>
-		<KolInputText
-			_on={{
-				onBlur: console.log,
-			}}
-			_type="search"
-			_label="Suche"
-		/>
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Freitexteingabefeld. </p>
+		</SampleDescription>
+		<KolForm>
+			<KolInputText
+				_on={{
+					onBlur: console.log,
+				}}
+				_type="search"
+				_label="Suche"
+			/>
+		</KolForm>
+	</>
 );

package/src/components/input-text/focus.tsx

@@ -3,6 +3,7 @@ import React, { useLayoutEffect, useRef } from 'react';
 import { KolButton, KolForm, KolInputText } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const InputTextFocus: FC = () => {
 	const ref = useRef<HTMLKolInputTextElement | null>(null);
@@ -14,14 +15,19 @@ export const InputTextFocus: FC = () => {
 	}, [ref]);
 
 	return (
-		<KolForm>
-			<div className="grid gap-4">
-				<KolInputText ref={ref} _label="Vorname" />
-				<KolInputText _label="Nachname" />
-				<div>
-					<KolButton _label="Submit"></KolButton>
+		<>
+			<SampleDescription>
+				<p>Hier sind zwei Freitexteingabefelder.</p>
+			</SampleDescription>
+			<KolForm>
+				<div className="grid gap-4">
+					<KolInputText ref={ref} _label="Vorname" />
+					<KolInputText _label="Nachname" />
+					<div>
+						<KolButton _label="Submit"></KolButton>
+					</div>
 				</div>
-			</div>
-		</KolForm>
+			</KolForm>
+		</>
 	);
 };

package/src/components/input-text/hide-errors.tsx

@@ -9,7 +9,7 @@ export const InputTextHideErrors: FC = () => (
 			This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
 		</SampleDescription>
 		<KolCard _label="Normal input field with error" _level={0}>
-			<KolInputText _error="Error message" _label="Input with error" _touched />
+			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
 		</KolCard>
 		<KolCard _label="Input field with hidden error" _level={0}>
 			<fieldset className="grid md:grid-cols-2 gap-4">
@@ -17,8 +17,8 @@ export const InputTextHideErrors: FC = () => (
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _error="This is a combined error message" _hideError _label="First input" _touched />
-				<KolInputText _error="This is a combined error message" _hideError _label="Second input with error" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
 			</fieldset>
 		</KolCard>
 	</div>

package/src/components/input-text/partials/cases.tsx

@@ -11,7 +11,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -34,9 +34,9 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				_accessKey="V"
 				ref={ref}
 			/>
-			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
-			<KolInputText {...props} _placeholder="Placeholder" _error={ERROR_MSG} _touched _type="url" _label="URL (url)" />
-			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
+			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
+			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'warning', _description: 'Kleine Warnung' }} />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />

package/src/components/link/basic.tsx

@@ -2,25 +2,31 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolLink } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const LinkBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolLink _href="#/back-page" _label="Simple Link" />
-		<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
-		<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
-		<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
-			als <strong>inline-Element</strong> ausgegeben.
-		</p>
-		<p>
-			In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-			<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und
-			andere Eigenschaften zuweisen.
-			<br />
-			<br />
-			Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über
-			die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
-		</p>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier sind Beispiele für verschiedene Links.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolLink _href="#/back-page" _label="Simple Link" />
+			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />
+			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
+			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
+				als <strong>inline-Element</strong> ausgegeben.
+			</p>
+			<p>
+				In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
+				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und
+				andere Eigenschaften zuweisen.
+				<br />
+				<br />
+				Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über
+				die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+			</p>
+		</div>
+	</>
 );