feat: multiple controls

index.ts

@@ -1,8 +1,3 @@
-// Do not write code directly here, instead use the `src` folder!
-
-// What you should do here is re-exports all the things you want your user to access, ex:
-// export { HelloWorld } from "./src/main.ts"
-// export type { HelloWorldResult } from "./src/types.ts"
 import Form from './src/Form.astro';
 export default Form;
-export {FormGroup, FormControl} from './src/index';
+export * from './src/index';

src/Form.astro

@@ -3,6 +3,10 @@ import {FormGroup} from './form-group';
 const form: FormGroup = Astro.props.formGroup;
 ---
 <form>
-  <label>{form.controls[0].label}</label>
-	<input type={form.controls[0].type} value={form.controls[0].value} />
+		{form.controls.map(control => (
+			<field>
+						<label for={control.name}>{control.label}</label>
+						<input name={control.name} id={control.name} type={control.type} value={control.value} />
+			</field>
+		))}
 </form>