import { z } from "zod";
const formState = ref({
firstName: "",
shipping: "",
});
const schema = z.object({
firstName: z.string().min(1, { message: "First Name is required" }),
shipping: z.enum(["standard", "express"], {
required_error: "You must select an option.",
}),
});
const shippingVariants = ref([
{
value: "standard",
label: "Standard",
},
{
value: "express",
label: "Express",
},
]);
<UForm
ref="form"
:state="formState"
:schema="schema"
@submit="onSubmit"
>
<UFormGroup label="First Name" required name="firstName">
<UInput v-model="firstName" />
</UFormGroup>
<URadioGroup
v-model="formState.shipping"
legend="Select a shipping method"
:options="shippingVariants"
/>
<UButton type="submit">Review Summery</UButton>
</UForm>
import { z } from "zod";
const formState = ref({
firstName: "",
shipping: "",
});
const schema = z.object({
firstName: z.string().min(1, { message: "First Name is required" }),
shipping: z.enum(["standard", "express"], {
required_error: "You must select an option.",
}),
});
const shippingVariants = ref([
{
value: "standard",
label: "Standard",
},
{
value: "express",
label: "Express",
},
]);
<UForm
ref="form"
:state="formState"
:schema="schema"
@submit="onSubmit"
>
<UFormGroup label="First Name" required name="firstName">
<UInput v-model="firstName" />
</UFormGroup>
<URadioGroup
v-model="formState.shipping"
legend="Select a shipping method"
:options="shippingVariants"
/>
<UButton type="submit">Review Summery</UButton>
</UForm>