feat: support for labelPosition, radio/checkboxed checked value

src/Form.astro

@@ -1,12 +1,24 @@
 ---
 import {FormGroup} from './form-group';
+export interface Props {
+	formGroup: FormGroup;
+}
+
 const form: FormGroup = Astro.props.formGroup;
 ---
 <form>
 		{form?.controls?.map(control => (
-			<field>
+			<div>
-						<label for={control.name}>{control.label}</label>
+						{(control.labelPosition === 'left')
-						<input name={control.name} id={control.name} type={control.type} value={control.value} />
+							? <label for={control.name}>{control.label}</label>
-			</field>
+							: null}
+
+						<input name={control.name} id={control.name} type={control.type} value={control.value} checked={control.value==='checked'} />
+
+						{(control.labelPosition === 'right')
+							? <label for={control.name}>{control.label}</label>
+							: null}
+
+			</div>
 		))}
 </form>

src/form-control.ts

@@ -3,4 +3,5 @@ export class FormControl {
   type?: 'text' | 'checkbox' | 'radio' = 'text'; // add more
   value?: string | number | null | string[];
 	label?: string;
+	labelPosition?: 'right' | 'left' = 'left';
 }

src/form-group.ts

@@ -4,6 +4,11 @@ export class FormGroup {
   controls: FormControl[];
 
   constructor(controls: FormControl[]) {
-    this.controls = controls;
+    this.controls = controls.map(control => (
+			{
+				...control,
+				labelPosition: control.labelPosition || 'left'
+			}
+		));
   }
 }