From 123f24c57d8f63e319d67aae00a5e6116caa5ac0 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 10:27:23 +0200
Subject: [PATCH] feat(09-04): replace plain Remote name input with
 TextFieldMD3

- Add import { TextFieldMD3 } from '../ui/TextFieldMD3'
- Replace label+input+error block with TextFieldMD3 component
- Pass registration={register('name')}, error={errors.name}, required
- Closes COMP-01 gap: all wizard text inputs now use TextFieldMD3 floating label
---
 src/components/wizard/BackendSelectionStep.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/wizard/BackendSelectionStep.tsx b/src/components/wizard/BackendSelectionStep.tsx
index e835317..33883eb 100644
--- a/src/components/wizard/BackendSelectionStep.tsx
+++ b/src/components/wizard/BackendSelectionStep.tsx
@@ -7,6 +7,7 @@ import type { BackendType } from '../../store/types';
 import { BACKEND_REGISTRY } from '../../schemas/registry';
 import { BackendCard } from '../ui/BackendCard';
 import { MD3_BTN_FILLED } from '../../styles/md3-buttons';
+import { TextFieldMD3 } from '../ui/TextFieldMD3';
 
 const remoteNameSchema = z.object({
   name: z
@@ -54,13 +55,13 @@ export function BackendSelectionStep() {
     <div>
       <h2>Step 1: Select Backend</h2>
       <form onSubmit={handleSubmit(onValidSubmit)}>
-        <div>
-          <label htmlFor="remote-name">Remote name</label>
-          <input id="remote-name" type="text" {...register('name')} />
-          {errors.name && (
-            <p role="alert">{errors.name.message}</p>
-          )}
-        </div>
+        <TextFieldMD3
+          id="remote-name"
+          label="Remote name"
+          registration={register('name')}
+          error={errors.name}
+          required
+        />
         <div data-testid="backend-cards">
           {Object.entries(BACKEND_REGISTRY).map(([type, entry]) => (
             <BackendCard