Components
Loading preview...
This is a dialog component
npx shadcn@latest add https://21st.dev/r/lyanchouss/one-dialog'use client'
import { zodResolver } from '@hookform/resolvers/zod'
import { Controller, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import * as z from 'zod'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import {
Field,
FieldError,
FieldGroup,
FieldLabel,
} from '@/components/ui/field-1'
import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
const departments = [
{ value: 'design', label: 'Design' },
{ value: 'engineering', label: 'Engineering' },
{ value: 'marketing', label: 'Marketing' },
{ value: 'support', label: 'Support' },
] as const
const formSchema = z.object({
name: z.string().min(1, 'Enter your name.'),
department: z.string().min(1, 'Select a department.'),
})
type FormValues = z.infer<typeof formSchema>
export function Dialog19() {
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
defaultValues: {
name: '',
department: '',
},
})
function onSubmit(data: FormValues) {
const dept =
departments.find((item) => item.value === data.department)?.label ??
data.department
toast.success('Request submitted', {
description: `${data.name} · ${dept}`,
})
}
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">New request (RHF)</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<form
id="dialog-19-rhf-form"
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-col gap-6"
>
<DialogHeader>
<DialogTitle>Submit a request</DialogTitle>
<DialogDescription>
React Hook Form with Zod validation inside a dialog.
</DialogDescription>
</DialogHeader>
<FieldGroup>
<Controller
name="name"
control={form.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel htmlFor="dialog-19-name">Your name</FieldLabel>
<Input
{...field}
id="dialog-19-name"
placeholder="Felipe Menezes"
aria-invalid={fieldState.invalid}
/>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
<Controller
name="department"
control={form.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel htmlFor="dialog-19-department">
Department
</FieldLabel>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger
id="dialog-19-department"
className="w-full"
aria-invalid={fieldState.invalid}
>
<SelectValue placeholder="Select department" />
</SelectTrigger>
<SelectContent className="z-[102]">
<SelectGroup>
{departments.map((item) => (
<SelectItem key={item.value} value={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
{fieldState.invalid && (
<FieldError errors={[fieldState.error]} />
)}
</Field>
)}
/>
</FieldGroup>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="outline">
Cancel
</Button>
</DialogClose>
<Button type="submit">Submit</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
)
}
export default Dialog19