rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-06-30 08:04:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(www): refactor controlled inputs API examples (#385)

Browse Source 
* refactor: remove usage of uncontrolled input apis within controlled inputs

Closes: #384

* docs: display FormField controlled input usage example

---------

Co-authored-by: shadcn <m@shadcn.com>
This commit is contained in:
moshyfawn
2023-05-20 00:58:44 -04:00
committed by GitHub
parent 11447c9bff
commit a3c904dcc9
6 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/app/examples/forms/account/account-form.tsx
View File

@@ -93,11 +93,11 @@ export function AccountForm() {
<FormField
control={form.control}
name="name"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input placeholder="Your name" {...form.register("name")} />
<Input placeholder="Your name" {...field} />
</FormControl>
<FormDescription>
This is the name that will be displayed on your profile and in

4
apps/www/app/examples/forms/appearance/appearance-form.tsx
View File

@@ -59,7 +59,7 @@ export function AppearanceForm() {
<FormField
control={form.control}
name="font"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Font</FormLabel>
<div className="relative w-max">
@@ -69,7 +69,7 @@ export function AppearanceForm() {
buttonVariants({ variant: "outline" }),
"w-[200px] appearance-none bg-transparent font-normal"
)}
{...form.register("font")}
{...field}
>
<option value="inter">Inter</option>
<option value="manrope">Manrope</option>

8
apps/www/app/examples/forms/profile-form.tsx
View File

@@ -91,11 +91,11 @@ export function ProfileForm() {
<FormField
control={form.control}
name="username"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...form.register("username")} />
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormDescription>
This is your public display name. It can be your real name or a
@@ -134,14 +134,14 @@ export function ProfileForm() {
<FormField
control={form.control}
name="bio"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Bio</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...form.register("bio")}
{...field}
/>
</FormControl>
<FormDescription>

4
apps/www/components/examples/input/react-hook-form.tsx
View File

@@ -45,11 +45,11 @@ export function InputReactHookForm() {
<FormField
control={form.control}
name="username"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...form.register("username")} />
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormDescription>
This is your public display name.

4
apps/www/components/examples/textarea/react-hook-form.tsx
View File

@@ -54,14 +54,14 @@ export function TextareaReactHookForm() {
<FormField
control={form.control}
name="bio"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Bio</FormLabel>
<FormControl>
<Textarea
placeholder="Tell us a little bit about yourself"
className="resize-none"
{...form.register("bio")}
{...field}
/>
</FormControl>
<FormDescription>

6
apps/www/content/docs/forms/react-hook-form.mdx
View File

@@ -58,11 +58,11 @@ const form = useForm()
<FormField
control={form.control}
name="username"
render={() => (
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...form.register("username")} />
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormDescription>This is your public display name.</FormDescription>
<FormMessage />
@@ -181,7 +181,7 @@ export function ProfileForm() {
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...form.register("username")} />
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormDescription>
This is your public display name.