Form , shadcn/ui components例

id: 148, 2024-09-09

概要

shadcn/ui , Form 実装例になります。
まとめリンクは、下記になります。
https://knakatech-blog.pages.dev/books/12

関連

https://ui.shadcn.com/docs/components/form

src/client/Form.tsx
https://github.com/kuc-arc-f/express_49preact/blob/main/src/client/Form.tsx

// 1. Define your form.
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
    username: "",
},
});
// 2. Define a submit handler.
function onSubmit(values: z.infer<typeof formSchema>) {
// Do something with the form values.
// ✅ This will be type-safe and validated.
console.log(values)
};
//
return(
<div className="container mx-auto my-2 px-8 bg-white">
<Head />
<h1 className="text-4xl font-bold">Form</h1>
<hr className="my-2" />
<Form {...form}>
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
    <FormField
        control={form.control}
        name="username"
        render={({ field }) => (
        <FormItem>
            <FormLabel>Username</FormLabel>
            <FormControl>
            <Input placeholder="shadcn" {...field} />
            </FormControl>
            <FormDescription>
            This is your public display name.
            </FormDescription>
            <FormMessage />
        </FormItem>
        )}
    />
    <Button type="submit">Submit</Button>
    </form>
</Form>


</div>
);