Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2394c74

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /