shadcn/ui

Formok és interaktív elemek

Input/Label/Textarea/Select/Checkbox/Switch példák, és React Hook Form + Zod integráció shadcn Form komponenssel.

Formok és interaktív elemek

Input + Label

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

Select

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

Checkbox / Switch

import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"

React Hook Form + Zod

Egy tipikus setup:

react-hook-form
zod
@hookform/resolvers
shadcn form komponens: npx shadcn-ui@latest add form

Rövid összefoglaló

A shadcn form elemek jól illeszkednek RHF+Zod validációhoz.
Interaktív komponenseknél Next.js App Routerban gyakran kell "use client".

Komponensek testreszabása

Saját variánsok, wrapper komponensek, asChild minta és mikor módosíts közvetlenül ui/-ban.

Gyakorlati példák

Login form, Dialog/Modal, Dropdown menu és Toast értesítések minták shadcn/ui-val.

On this page

Formok és interaktív elemek Input + Label Select Checkbox / Switch React Hook Form + Zod Rövid összefoglaló