Skip to content

Commit 2394c74

Browse files
committed
update form exmaple with shadcn/ui
1 parent f1c1219 commit 2394c74

File tree

1 file changed

+44
-2
lines changed

1 file changed

+44
-2
lines changed

src/content/get-started.mdx

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -426,11 +426,11 @@ const App = () => {
426426

427427
## Integrating Controlled Inputs {#IntegratingControlledInputs}
428428

429-
This library embraces uncontrolled components and native HTML inputs. However, it's hard to avoid working with external controlled components such as [React-Select](https://github.com/JedWatson/react-select), [AntD](https://github.com/ant-design/ant-design) and [MUI](https://mui.com/). To make this simple, we provide a wrapper component, [Controller](/docs#Controller), to streamline the integration process while still giving you the freedom to use a custom register.
429+
This library embraces uncontrolled components and native HTML inputs. However, it's hard to avoid working with external controlled components such as [shadcn/ui](https://ui.shadcn.com/docs/components/form), [React-Select](https://github.com/JedWatson/react-select), [AntD](https://github.com/ant-design/ant-design) and [MUI](https://mui.com/). To make this simple, we provide a wrapper component, [Controller](/docs#Controller), to streamline the integration process while still giving you the freedom to use a custom register.
430430

431431
#### Using Component API
432432

433-
<TabGroup buttonLabels={["TS", "JS"]} >
433+
<TabGroup buttonLabels={["TS", "JS", 'shadcn/ui']} >
434434

435435
```typescript copy sandbox="https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw"
436436
import { useForm, Controller, SubmitHandler } from "react-hook-form"
@@ -490,6 +490,48 @@ function Input({ control, name }) {
490490
}
491491
```
492492

493+
```javascript copy
494+
import { zodResolver } from "@hookform/resolvers/zod"
495+
import { useForm } from "react-hook-form"
496+
import { z } from "zod"
497+
import { Form, FormControl, FormField } from "@/components/ui/form"
498+
import { Input } from "@/components/ui/input"
499+
500+
const FormSchema = z.object({
501+
username: z.string().min(2, {
502+
message: "Username must be at least 2 characters.",
503+
}),
504+
})
505+
506+
export function InputForm() {
507+
const form = useForm<z.infer<typeof FormSchema>>({
508+
resolver: zodResolver(FormSchema),
509+
defaultValues: {
510+
username: "",
511+
},
512+
})
513+
514+
function onSubmit(data: z.infer<typeof FormSchema>) {
515+
console.log(data);
516+
}
517+
518+
return (
519+
<Form {...form}>
520+
<form onSubmit={form.handleSubmit(onSubmit)}>
521+
<FormField
522+
control={form.control}
523+
name="username"
524+
render={({ field }) => (
525+
<FormControl><Input {...field} /></FormControl>
526+
)}
527+
/>
528+
<button type="submit">Submit</button>
529+
</form>
530+
</Form>
531+
)
532+
}
533+
```
534+
493535
</TabGroup>
494536

495537
#### Using Hooks API

0 commit comments

Comments
 (0)