@public-ui/sample-react 1.7.0-rc.13 → 1.7.0-rc.15

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

@@ -1,29 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputRange } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusInput } from '../FocusInput';
+import { InputRangeVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-export const InputRangeBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputRange
-			_id="range"
-			_min={0}
-			_max={50}
-			_name="range"
-			_error={ERROR_MSG}
-			_label="Schieberegler"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolInputRange _id="range" _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler" />
-		<KolInputRange _disabled _id="range" _min={0} _max={50} _label="Schieberegler" />
-	</KolForm>
-);
+export const InputRangeBasic: FC = () => <FocusInput RefInput={InputRangeVariants} />;

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

@@ -0,0 +1,31 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputRange } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputRange
+				{...props}
+				_min={0}
+				_max={50}
+				_error={ERROR_MSG}
+				_label="Schieberegler"
+				_icon={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+				_touched
+			/>
+			<KolInputRange {...props} ref={ref} _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler mit Fehler" _touched />
+			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Schieberegler (disabled)" />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputRangeCases } from './cases';
+
+export const InputRangeVariants = forwardRef<HTMLKolInputRangeElement, Components.KolInputRange>(function InputRangeVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Range</legend>
+				<InputRangeCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Range (hideLabel)</legend>
+				<InputRangeCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -1,72 +1,5 @@
-import React from 'react';
-import { KolForm, KolInputText } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusInput } from '../FocusInput';
+import { InputTextVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-import { ERROR_MSG, HINT_MSG } from '../../shares/constants';
-
-export const InputTextBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolInputText
-			_id=""
-			_hint={HINT_MSG}
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_icon={{
-				left: 'codicon codicon-arrow-left',
-				right: {
-					icon: 'codicon codicon-arrow-right',
-					style: {
-						'font-size': '200%',
-					},
-				},
-			}}
-			_on={{
-				onBlur: console.log,
-				onChange: console.log,
-				onClick: console.log,
-				onFocus: console.log,
-			}}
-			_hideLabel
-			_required
-			_smartButton={{
-				_icon: {
-					left: {
-						icon: 'codicon codicon-eye',
-					},
-				},
-				_hideLabel: true,
-				_label: 'Passwort anzeigen',
-				_on: {
-					onClick: () => {},
-				},
-			}}
-			_type="search"
-			_label="Suche"
-		/>
-		<KolInputText
-			_id=""
-			_error={ERROR_MSG}
-			_placeholder="Mit Icons"
-			_label="Suche"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-			_hideLabel
-			_type="search"
-		/>
-		<KolInputText _id="" _placeholder="Placeholder" _label="Vorname (text)" _required />
-		<KolInputText _id="" _placeholder="Placeholder" _label="Suche (search)" _type="search" />
-		<KolInputText _id="vorname" _placeholder="Placeholder" _error={ERROR_MSG} _type="url" _label="URL (url)" />
-		<KolInputText _id="" _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
-		<KolInputText _id="" _placeholder="Placeholder" _read-only _label="Vorname (text, readonly)" />
-		<KolInputText _id="" _value="Value" _read-only _label="Vorname (text, readonly)" />
-		<KolInputText _id="" _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
-		<KolInputText _id="" _value="Value" _disabled _label="Vorname (text, disabled)" />
-	</KolForm>
-);
+export const InputTextBasic: FC = () => <FocusInput RefInput={InputTextVariants} />;

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

@@ -1,10 +1,8 @@
 import { KolForm, KolInputText } from '@public-ui/react';
-import React from 'react';
-
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 export const InputTextBlur: FC = () => (
-	<KolForm className="grid gap-4">
+	<KolForm>
 		<KolInputText
 			_on={{
 				onBlur: console.log,

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

@@ -13,11 +13,13 @@ export const InputTextFocus: FC = () => {
 	}, [ref]);
 
 	return (
-		<KolForm className="grid gap-4">
-			<KolInputText ref={ref} _id="vorname" _label="Vorname" />
-			<KolInputText _label="Nachname" />
-			<div>
-				<KolButton _label="Submit"></KolButton>
+		<KolForm>
+			<div className="grid gap-4">
+				<KolInputText ref={ref} _label="Vorname" />
+				<KolInputText _label="Nachname" />
+				<div>
+					<KolButton _label="Submit"></KolButton>
+				</div>
 			</div>
 		</KolForm>
 	);

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

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+
+import { KolInputText } from '@public-ui/react';
+
+import { Components } from '@public-ui/components';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+
+export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolInputText
+				{...props}
+				_hint={HINT_MSG}
+				_error={ERROR_MSG}
+				_placeholder="Mit Icons"
+				_icon={{
+					left: 'codicon codicon-arrow-left',
+					right: {
+						icon: 'codicon codicon-arrow-right',
+						style: {
+							'font-size': '200%',
+						},
+					},
+				}}
+				_on={{
+					onBlur: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+				_hideLabel
+				_required
+				_type="search"
+				_touched
+				_label="Suche"
+			/>
+			<KolInputText {...props} ref={ref} _placeholder="Placeholder" _label="Vorname (text)" _required />
+			<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" _readOnly _label="Vorname (text, readonly)" />
+			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
+			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />
+			<KolInputText {...props} _value="Value" _disabled _label="Vorname (text, disabled)" />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { InputTextCases } from './cases';
+
+export const InputTextVariants = forwardRef<HTMLKolInputTextElement, Components.KolInputText>(function InputTextVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<InputTextCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<InputTextCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -4,12 +4,9 @@ import { InputTextBasic } from './basic';
 import { InputTextBlur } from './blur';
 import { InputTextFocus } from './focus';
 
-import { InputTextHiddenLabel } from './hidden-label';
-
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		'hidden-label': InputTextHiddenLabel,
 		blur: InputTextBlur,
 		focus: InputTextFocus,
 	},

package/src/components/link/image.tsx

@@ -9,9 +9,8 @@ export const LinkImage: FC = () => (
 		<br />
 		<KolLink _href="#" _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
-			<KolKolibri></KolKolibri>
+			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
-		<KolKolibri />
 		<br />
 		<KolLink _href="#" _label="">
 			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />

package/src/components/link/target.tsx

@@ -5,11 +5,10 @@ import { FC } from 'react';
 
 export const LinkTarget: FC = () => (
 	<div className="d-flex gap-4">
-		<KolLink _href="#" _label="Ich bin ein Link ohne Target" />
-		<KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />
-		<KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
-		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />
-		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />
+		<KolLink _href="#" _label="Ich bin ein Link ohne Target" /> <KolLink _href="#" _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
+		<KolLink _href="#" _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />{' '}
+		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link ohne Target" />{' '}
+		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_self)" _target="_self" />{' '}
 		<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Ich bin ein Link mit Target (_blank)" _target="_blank" />
 	</div>
 );

package/src/components/select/basic.tsx

@@ -1,51 +1,5 @@
-import React from 'react';
-import { SelectOption } from '@public-ui/components';
+import React, { FC } from 'react';
+import { FocusInput } from '../FocusInput';
+import { SelectVariants } from './partials/variants';
 
-import { KolForm, KolSelect } from '@public-ui/react';
-
-import { FC } from 'react';
-
-import countries from 'world_countries_lists/data/countries/de/countries.json';
-
-import { ERROR_MSG } from '../../shares/constants';
-
-const STATUS_OPTIONS: SelectOption<string>[] = [
-	{
-		label: '- Keine Auswahl',
-		value: '',
-		disabled: true,
-	},
-];
-
-type Country = {
-	id: number;
-	alpha2: string;
-	alpha3: string;
-	name: string;
-};
-(countries as Country[]).forEach((country) =>
-	STATUS_OPTIONS.push({
-		label: country.name,
-		value: country.alpha2,
-	}),
-);
-
-export const SelectBasic: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolSelect
-			_id=""
-			_options={STATUS_OPTIONS}
-			_error={ERROR_MSG}
-			_label="Anrede"
-			_icon={{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			}}
-		/>
-		<KolSelect _id="" _options={STATUS_OPTIONS} _label="Anrede" _multiple _required _error={ERROR_MSG} />
-	</KolForm>
-);
+export const SelectBasic: FC = () => <FocusInput RefInput={SelectVariants} />;

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

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+
+import { Components, SelectOption } from '@public-ui/components';
+import { KolSelect } from '@public-ui/react';
+import { ERROR_MSG } from '../../../shares/constants';
+
+import countries from 'world_countries_lists/data/countries/de/countries.json';
+
+type Country = {
+	id: number;
+	alpha2: string;
+	alpha3: string;
+	name: string;
+};
+
+const SALUTATION_OPTIONS: SelectOption<string>[] = [
+	{
+		label: '- Keine Auswahl',
+		value: '',
+		disabled: true,
+	},
+	{
+		label: 'Frau',
+		value: 'Frau',
+	},
+	{
+		label: 'Herr',
+		value: 'Herr',
+	},
+	{
+		label: 'Divers',
+		value: 'Divers',
+	},
+];
+
+const COUNTRY_OPTIONS: SelectOption<string>[] = [
+	...(countries as Country[]).map((country) => ({
+		label: country.name,
+		value: country.alpha2,
+	})),
+];
+
+export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolSelect
+				{...props}
+				ref={ref}
+				_options={SALUTATION_OPTIONS}
+				_error={ERROR_MSG}
+				_label="Anrede"
+				_icon={{
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					right: {
+						icon: 'codicon codicon-arrow-right',
+					},
+				}}
+				_touched
+			/>
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _error={ERROR_MSG} _touched />
+			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
+			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl mit Fehler" _multiple _required _error={ERROR_MSG} _touched />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { SelectCases } from './cases';
+
+export const SelectVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<SelectCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<SelectCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

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

@@ -1,45 +1,17 @@
-import React, { useState } from 'react';
+import React, { FC } from 'react';
 import { KolSplitButton } from '@public-ui/react';
 
-import { FC } from 'react';
-
 export const SplitButtonBasic: FC = () => {
-	const [showDropdown, setShowDropdown] = useState(false);
-
 	return (
 		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" _onClick={console.log}>
-				I am
-				<br />a dwarf
+			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: console.log }}>
+				Drowndown-Inhalt
 			</KolSplitButton>
 			<KolSplitButton _label="ohne label" _hide-label _icon="codicon codicon-git-pull-request">
-				and
-				<br />
-				I&apos;m
-				<br />
-				digging
-				<br />a hole
-			</KolSplitButton>
-			<KolSplitButton _label="kick me">
-				diggy
-				<br />
-				diggy
-				<br />
-				hole
-			</KolSplitButton>
-			<KolSplitButton _label="schon offen" _show-dropdown={showDropdown}>
-				diggy
-				<br />
-				diggy
-				<br />
-				hole
+				Drowndown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label={`vorherigen ${showDropdown ? 'schließen' : 'öffnen'}`} _onClick={() => setShowDropdown(!showDropdown)}>
-				diggy
-				<br />
-				diggy
-				<br />
-				hole
+			<KolSplitButton _label="schon offen" _show>
+				Dropdown initial sichtbar
 			</KolSplitButton>
 		</div>
 	);

package/src/components/table/badge-size.tsx

@@ -48,4 +48,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableBadgeSize: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/render-cell.tsx

@@ -31,12 +31,12 @@ const HEADERS: KoliBriTableHeaders = {
 			{
 				label: 'Aktion (react)',
 				key: 'order',
-				render: (el, cell, tupel) => {
+				render: (el) => {
 					// https://reactjs.org/docs/portals.html
 					getRoot(el).render(
 						<>
 							<KolButton _label={'Speichern'} />
-							<KolInputText _id="test">Eingabe</KolInputText>
+							<KolInputText _label="Eingabe" />
 						</>,
 					);
 				},
@@ -45,4 +45,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableRenderCell: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/table/routes.ts

@@ -4,12 +4,12 @@ import { TableBadgeSize } from './badge-size';
 
 import { TableRenderCell } from './render-cell';
 
-import { TableSortTabel } from './sort-date';
+import { TableSortTable } from './sort-date';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
 		'render-cell': TableRenderCell,
-		'sort-data': TableSortTabel,
+		'sort-data': TableSortTable,
 	},
 };

package/src/components/table/sort-date.tsx

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTabel: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} />;
+export const TableSortTable: FC = () => <KolTable _caption="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/components/textarea/adjust-height.tsx

@@ -13,10 +13,10 @@ sit amet.`;
 export const TextareaAdjustHeight: FC = () => (
 	<KolForm className="row">
 		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _id="text-vertical" _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
+			<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
 		</div>
 		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _id="text-none" _resize="none" _value={VALUE} _label="Texteingabe (none)" />
+			<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
 		</div>
 	</KolForm>
 );

package/src/components/textarea/basic.tsx

@@ -1,11 +1,5 @@
-import React from 'react';
-import { KolForm, KolTextarea } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusInput } from '../FocusInput';
+import { TextareaVariants } from './partials/variants';
 
-import { FC } from 'react';
-import { ERROR_MSG } from '../../shares/constants';
-
-export const TextareaBasic: FC = () => (
-	<KolForm>
-		<KolTextarea _id="text" _error={ERROR_MSG} _label="Texteingabe" />
-	</KolForm>
-);
+export const TextareaBasic: FC = () => <FocusInput RefInput={TextareaVariants} />;

package/src/components/textarea/disabled.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaDisabled: FC = () => (
 	<KolForm>
-		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _id="text" _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
 	</KolForm>
 );

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

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react';
+import { ERROR_MSG } from '../../../shares/constants';
+
+export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<KolTextarea {...props} ref={ref} _error={ERROR_MSG} _label="Text" _touched />
+			<KolTextarea {...props} ref={ref} _label="Text (3 rows)" _rows={3} />
+		</div>
+	);
+});

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

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { Components } from '@public-ui/components';
+import { TextareaCases } from './cases';
+
+export const TextareaVariants = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<TextareaCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<TextareaCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/textarea/placeholder.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaPlaceholder: FC = () => (
 	<KolForm>
-		<KolTextarea _id="text" _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
+		<KolTextarea _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
 	</KolForm>
 );

package/src/components/textarea/readonly.tsx

@@ -5,6 +5,6 @@ import { FC } from 'react';
 
 export const TextareaReadOnly: FC = () => (
 	<KolForm>
-		<KolTextarea _error="Es ist ein Fehler aufgetreten." _id="text" _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		<KolTextarea _error="Es ist ein Fehler aufgetreten." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
 	</KolForm>
 );