src/lib/components/DataInput/TextInput.stories.svelte

@@ -6,27 +6,36 @@
 		title: 'Data Input/Text Input',
 		component: TextInput,
 		argTypes: {
+			bordered: {
+				control: 'boolean',
+			},
 			color: {
 				control: 'select',
 				options: [
+					'ghost',
 					'primary',
 					'secondary',
 					'accent',
-					'ghost',
-					'link',
 					'info',
 					'success',
 					'warning',
 					'error',
 				],
 			},
-			bordered: {
+			disabled: {
 				control: 'boolean',
 			},
+			error: {
+				control: 'text',
+			},
+			fade: { control: 'boolean' },
+			start: { control: 'text' },
+			end: { control: 'text' },
+			label: { control: 'text' },
+			placeholder: { control: 'text' },
 			size: {
 				control: 'select',
-				options: ['Default', 'xs', 'sm', 'lg'],
+				options: ['xs', 'sm', '-', 'lg'],
-				defaultValue: 'Default',
 			},
 			type: {
 				control: 'select',

src/lib/components/DataInput/TextInput.svelte

@@ -8,9 +8,11 @@
 		bordered?: boolean;
 		color?: Exclude<DaisyColor, 'neutral'>;
 		disabled?: boolean;
+		error?: string | Snippet;
 		fade?: boolean;
-		start?: Snippet | string;
+		start?: string | Snippet;
-		end?: Snippet | string;
+		end?: string | Snippet;
+		label?: string | Snippet;
 		name: string;
 		placeholder?: string;
 		size?: DaisySize;
@@ -24,9 +26,11 @@
 		bordered = false,
 		color,
 		disabled,
+		error,
 		fade,
 		start,
 		end,
+		label,
 		name,
 		placeholder,
 		size,
@@ -34,7 +38,33 @@
 	}: Props = $props();
 </script>
 
-<label
+<label class="form-control w-full">
+	<div class="label">
+		<span
+			class="label-text"
+			class:text-primary={color === 'primary'}
+			class:text-secondary={color === 'secondary'}
+			class:text-accent={color === 'accent'}
+			class:text-info={color === 'info'}
+			class:text-success={color === 'success'}
+			class:text-warning={color === 'warning'}
+			class:text-error={color === 'error' || error}
+		>
+			{#if typeof label === 'string'}
+				{label}
+			{:else if label}
+				{@render label()}
+			{/if}
+		</span>
+		<span class="label-text-alt font-semibold text-error">
+			{#if typeof error === 'string'}
+				{error}
+			{:else if error}
+				{@render error()}
+			{/if}
+		</span>
+	</div>
+	<div
 		transition:fadeTransition={{ duration: fade ? 200 : 0 }}
 		class="input flex w-full items-center gap-2"
 		class:input-bordered={bordered}
@@ -49,7 +79,7 @@
 		class:input-info={color === 'info'}
 		class:input-success={color === 'success'}
 		class:input-warning={color === 'warning'}
-	class:input-error={color === 'error'}
+		class:input-error={color === 'error' || error}
 	>
 		{#if typeof start === 'string'}
 			{start}
@@ -62,6 +92,7 @@
 		{:else}
 			{@render end?.()}
 		{/if}
+	</div>
 </label>
 
 <style>