diff --git a/index.ts b/index.ts
index 1eeb73c..ab80aaf 100644
--- a/index.ts
+++ b/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';
diff --git a/src/Form.astro b/src/Form.astro
index 0b69975..2a52b67 100644
--- a/src/Form.astro
+++ b/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>