radio group: fix live validation after invalid

src/routes/statemachine/+page.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import PhoneInput from '$lib/PhoneInput.svelte';
+	import RadioGroup from '$lib/RadioGroup.svelte';
 	import StateMachine, { type StateMachinePage } from '$lib/StateMachine.svelte';
 	import TextInput from '$lib/TextInput.svelte';
 	import { ArrowRight, Check } from 'phosphor-svelte';
 
 	let stateMachineRef: StateMachine;
-	let index = $state(1);
+	let index = $state(0);
 
 	const pages: StateMachinePage[] = [
 		{
@@ -79,6 +80,16 @@
 
 {#snippet firstPage()}
 	<TextInput label="What's your name?" validate={{ required: true }} />
+
+	<RadioGroup
+		label="What's your favorite color?"
+		options={[
+			{ label: 'Red', value: 'red' },
+			{ label: 'Blue', value: 'blue' },
+			{ label: 'Green', value: 'green' }
+		]}
+		required={true}
+	/>
 {/snippet}
 
 {#snippet secondPage()}