feat: add profile section in forms example (#44)

* feat: add profile section in forms example

* feat: add account and appearance sections in forms example

* feat: add notifications and display sections in forms example

* fix: fix checked prop in display form

apps/www/.vitepress/theme/components/ExamplesNav.vue

@@ -30,7 +30,7 @@ const examples = [
   },
   {
     name: 'Forms',
-    href: '/examples/forms',
+    href: '/examples/forms/forms',
     code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
   },
   {

apps/www/src/content/examples/forms/account.md

@@ -0,0 +1,5 @@
+<script setup>
+import AccountExample from "@/examples/forms/Account.vue"
+</script>
+
+<AccountExample />

apps/www/src/content/examples/forms/appearance.md

@@ -0,0 +1,5 @@
+<script setup>
+import AppearanceExample from "@/examples/forms/Appearance.vue"
+</script>
+
+<AppearanceExample />

apps/www/src/content/examples/forms/display.md

@@ -0,0 +1,5 @@
+<script setup>
+import DisplayExample from "@/examples/forms/Display.vue"
+</script>
+
+<DisplayExample />

apps/www/src/content/examples/forms/forms.md

@@ -0,0 +1,5 @@
+<script setup>
+import FormsExample from "@/examples/forms/Example.vue"
+</script>
+
+<FormsExample />

apps/www/src/content/examples/forms/notifications.md

@@ -0,0 +1,5 @@
+<script setup>
+import NotificationsExample from "@/examples/forms/Notifications.vue"
+</script>
+
+<NotificationsExample />

apps/www/src/examples/forms/Account.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import AccountForm from './components/AccountForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <AccountForm />
+  </FormsLayout>
+</template>

apps/www/src/examples/forms/Appearance.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import AppearanceForm from './components/AppearanceForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <AppearanceForm />
+  </FormsLayout>
+</template>

apps/www/src/examples/forms/Display.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import DisplayForm from './components/DisplayForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <DisplayForm />
+  </FormsLayout>
+</template>

apps/www/src/examples/forms/Example.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import ProfileForm from './components/ProfileForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <ProfileForm />
+  </FormsLayout>
+</template>

apps/www/src/examples/forms/Notifications.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import FormsLayout from './layouts/FormsLayout.vue'
+import NotificationsForm from './components/NotificationsForm.vue'
+</script>
+
+<template>
+  <FormsLayout>
+    <NotificationsForm />
+  </FormsLayout>
+</template>

apps/www/src/examples/forms/components/AccountForm.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { format } from 'date-fns'
+import { cn } from '@/lib/utils'
+
+import RadixIconsCalendar from '~icons/radix-icons/calendar'
+
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+
+const accountForm = ref({
+  name: '',
+  dob: null,
+  language: '',
+})
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const accountFormSchema = z.object({
+  name: z
+    .string()
+    .min(2, {
+      message: 'Name must be at least 2 characters.',
+    })
+    .max(30, {
+      message: 'Name must not be longer than 30 characters.',
+    }),
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+  language: z.string().nonempty({
+    message: 'Please select a language.',
+  }),
+})
+
+type AccountFormValues = z.infer<typeof accountFormSchema>
+const errors = ref<z.ZodFormattedError<AccountFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = accountFormSchema.safeParse(accountForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    console.log(errors.value)
+    return
+  }
+
+  console.log('Form submitted!', accountForm.value)
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Account
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      Update your account settings. Set your preferred language and timezone.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="name" :class="cn('text-sm', errors?.name && 'text-destructive')">
+        Name
+      </Label>
+      <Input id="name" v-model="accountForm.name" placeholder="Your name" />
+      <span class="text-muted-foreground text-sm">
+        This is the name that will be displayed on your profile and in emails.
+      </span>
+      <div v-if="errors?.name" class="text-sm text-destructive">
+        <span v-for="error in errors.name._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="dob" :class="cn('text-sm', errors?.dob && 'text-destructive')">
+        Date of Birth
+      </Label>
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button
+            variant="outline"
+            :class="cn(
+              'w-[280px] pl-3 text-left font-normal',
+              !accountForm.dob && 'text-muted-foreground',
+            )"
+          >
+            <span>{{ accountForm.dob ? format(accountForm.dob, "PPP") : "Pick a date" }}</span>
+            <RadixIconsCalendar class="ml-auto h-4 w-4 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-0">
+          <Calendar v-model="accountForm.dob" />
+        </PopoverContent>
+      </Popover>
+      <span class="text-muted-foreground text-sm">
+        Your date of birth is used to calculate your age.
+      </span>
+      <div v-if="errors?.dob" class="text-sm text-destructive">
+        <span v-for="error in errors.dob._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="language" :class="cn('text-sm', errors?.language && 'text-destructive')">
+        Language
+      </Label>
+      <Select id="language" v-model="accountForm.language">
+        <SelectTrigger class="w-[200px]">
+          <SelectValue placeholder="Select a language" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem v-for="language in languages" :key="language.value" :value="language.value">
+              {{ language.label }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <span class="text-muted-foreground text-sm">
+        This is the language that will be used in the dashboard.
+      </span>
+      <div v-if="errors?.language" class="text-sm text-destructive">
+        <span v-for="error in errors.language._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update account
+      </Button>
+    </div>
+  </form>
+</template>

apps/www/src/examples/forms/components/AppearanceForm.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '@/lib/utils'
+
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const appearenceForm = ref({
+  theme: 'light',
+  font: '',
+})
+
+const appearanceFormSchema = z.object({
+  theme: z.enum(['light', 'dark'], {
+    required_error: 'Please select a theme.',
+  }),
+  font: z.enum(['inter', 'manrope', 'system'], {
+    invalid_type_error: 'Select a font',
+    required_error: 'Please select a font.',
+  }),
+})
+
+type AppearanceFormValues = z.infer<typeof appearanceFormSchema>
+const errors = ref<z.ZodFormattedError<AppearanceFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = appearanceFormSchema.safeParse(appearenceForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    console.log(errors.value)
+    return
+  }
+
+  console.log('Form submitted!', appearenceForm.value)
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Appearence
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      Customize the appearance of the app. Automatically switch between day and night themes.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="font" :class="cn('text-sm', errors?.font && 'text-destructive')">
+        Font
+      </Label>
+      <Select id="font" v-model="appearenceForm.font">
+        <SelectTrigger class="w-[200px]">
+          <SelectValue placeholder="Select a font" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="inter">
+              Inter
+            </SelectItem>
+            <SelectItem value="manrope">
+              Manrope
+            </SelectItem>
+            <SelectItem value="system">
+              System
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <span class="text-muted-foreground text-xs">
+        Set the font you want to use in the dashboard.
+      </span>
+      <div v-if="errors?.font" class="text-sm text-destructive">
+        <span v-for="error in errors.font._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+
+    <div class="grid gap-2">
+      <Label for="theme" :class="cn('text-sm', errors?.theme && 'text-destructive')">
+        Theme
+      </Label>
+      <span class="text-muted-foreground text-xs">
+        Select the theme for the dashboard.
+      </span>
+      <RadioGroup
+        v-model="appearenceForm.theme"
+        default-value="light"
+        class="grid max-w-md grid-cols-2 gap-8 pt-2"
+      >
+        <div class="grid gap-2">
+          <Label class="[&:has([data-state=checked])>div]:border-primary">
+            <div>
+              <RadioGroupItem value="light" class="sr-only" />
+            </div>
+            <div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
+              <div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
+                <div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
+                  <div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+                  <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+                  <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-[#ecedef]" />
+                  <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
+                </div>
+              </div>
+            </div>
+            <span class="block w-full p-2 text-center font-normal">
+              Light
+            </span>
+          </Label>
+        </div>
+        <div>
+          <Label class="[&:has([data-state=checked])>div]:border-primary">
+            <div>
+              <RadioGroupItem value="dark" class="sr-only" />
+            </div>
+            <div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+              <div class="space-y-2 rounded-sm bg-slate-950 p-2">
+                <div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                  <div class="h-2 w-[80px] rounded-lg bg-slate-400" />
+                  <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-slate-400" />
+                  <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+                </div>
+                <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
+                  <div class="h-4 w-4 rounded-full bg-slate-400" />
+                  <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
+                </div>
+              </div>
+            </div>
+            <span class="block w-full p-2 text-center font-normal">
+              Dark
+            </span>
+          </Label>
+        </div>
+
+        <div class="col-span-2">
+          <span v-if="errors?.theme" class="text-sm text-destructive">
+            <span v-for="error in errors.theme._errors" :key="error">{{ error }}</span>
+          </span>
+        </div>
+      </RadioGroup>
+    </div>
+
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update preferences
+      </Button>
+    </div>
+  </form>
+</template>

apps/www/src/examples/forms/components/DisplayForm.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '@/lib/utils'
+
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const displayForm = ref({
+  items: ['recents', 'home'],
+})
+
+const items = [
+  {
+    id: 'recents',
+    label: 'Recents',
+  },
+  {
+    id: 'home',
+    label: 'Home',
+  },
+  {
+    id: 'applications',
+    label: 'Applications',
+
+  },
+  {
+    id: 'desktop',
+    label: 'Desktop',
+
+  },
+  {
+    id: 'downloads',
+    label: 'Downloads',
+
+  },
+  {
+    id: 'documents',
+    label: 'Documents',
+
+  },
+] as const
+
+const displayFormSchema = z.object({
+  items: z.array(z.string()).refine(value => value.some(item => item), {
+    message: 'You have to select at least one item.',
+  }),
+})
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>
+const errors = ref<z.ZodFormattedError<DisplayFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = displayFormSchema.safeParse(displayForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    console.log(errors.value)
+    return
+  }
+
+  console.log('Form submitted!', displayForm.value)
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Display
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      Turn items on or off to control what's displayed in the app.
+    </p>
+  </div>
+  <Separator />
+  <form @submit.prevent="handleSubmit">
+    <div class="mb-4">
+      <Label for="sidebar" :class="cn('text-md', errors?.items && 'text-destructive')">
+        Sidebar
+      </Label>
+      <span class="text-xs text-muted-foreground">
+        Select the items you want to display in the sidebar.
+      </span>
+    </div>
+    <div v-for="item in items" :key="item.id" class="pb-1">
+      <div class="flex flex-row items-center space-x-3 space-y-0">
+        <Checkbox :id="item.id" :checked="displayForm.items.includes(item.id)" @change="displayForm.items.includes(item.id) ? displayForm.items.splice(displayForm.items.indexOf(item.id), 1) : displayForm.items.push(item.id)" />
+        <Label :for="item.id">{{ item.label }}</Label>
+      </div>
+    </div>
+    <div class="flex justify-start mt-4">
+      <Button type="submit">
+        Update display
+      </Button>
+    </div>
+  </form>
+</template>

apps/www/src/examples/forms/components/NotificationsForm.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '@/lib/utils'
+
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
+import { Switch } from '@/lib/registry/new-york/ui/switch'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const notificationsForm = ref({
+  type: '',
+  mobile: false,
+  communication_emails: false,
+  social_emails: true,
+  marketing_emails: false,
+  security_emails: true,
+})
+
+const notificationsFormSchema = z.object({
+  type: z.enum(['all', 'mentions', 'none'], {
+    required_error: 'You need to select a notification type.',
+  }),
+  mobile: z.boolean().default(false).optional(),
+  communication_emails: z.boolean().default(false).optional(),
+  social_emails: z.boolean().default(false).optional(),
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+})
+
+type notificationsFormValues = z.infer<typeof notificationsFormSchema>
+const errors = ref<z.ZodFormattedError<notificationsFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = notificationsFormSchema.safeParse(notificationsForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    console.log(errors.value)
+    return
+  }
+
+  console.log('Form submitted!', notificationsForm.value)
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Notifications
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      Configure how you receive notifications.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="font" :class="cn('text-sm', errors?.type && 'text-destructive')">
+        Notify me about...
+      </Label>
+      <RadioGroup
+        v-model="notificationsForm.type"
+        default-value="all"
+        class="flex flex-col space-y-1"
+      >
+        <div class="flex items-center space-x-3 space-y-0">
+          <RadioGroupItem id="all" value="all" />
+          <Label for="all">All new messages</Label>
+        </div>
+        <div class="flex items-center space-x-3 space-y-0">
+          <RadioGroupItem id="mentions" value="mentions" />
+          <Label for="mentions">Direct messages and mentions</Label>
+        </div>
+        <div class="flex items-center space-x-3 space-y-0">
+          <RadioGroupItem id="none" value="none" />
+          <Label for="none">Nothing</Label>
+        </div>
+        <div v-if="errors?.type" class="text-sm text-destructive">
+          <span v-for="error in errors.type._errors" :key="error">{{ error }}</span>
+        </div>
+      </RadioGroup>
+    </div>
+
+    <div class="grid gap-2">
+      <h3 class="mb-4 text-lg font-medium">
+        Email Notifications
+      </h3>
+      <div class="space-y-4">
+        <div class="flex flex-row items-center justify-between rounded-lg border p-4">
+          <div class="space-y-0.5">
+            <Label class="text-base" for="communication_emails">
+              Communication emails
+            </Label>
+            <span class="text-xs text-muted-foreground">
+              Receive emails about your account activity.
+            </span>
+          </div>
+          <Switch
+            id="communication_emails"
+            v-model:checked="notificationsForm.communication_emails"
+          />
+        </div>
+      </div>
+      <div class="flex flex-row items-center justify-between rounded-lg border p-4">
+        <div class="space-y-0.5">
+          <Label class="text-base" for="marketing_emails">
+            Marketing emails
+          </Label>
+          <span class="text-xs text-muted-foreground">
+            Receive emails about new products, features, and more.
+          </span>
+        </div>
+        <Switch
+          id="marketing_emails"
+          v-model:checked="notificationsForm.marketing_emails"
+        />
+      </div>
+      <div class="flex flex-row items-center justify-between rounded-lg border p-4">
+        <div class="space-y-0.5">
+          <Label class="text-base" for="social_emails">
+            Social emails
+          </Label>
+          <span class="text-xs text-muted-foreground">
+            Receive emails for friend requests, follows, and more.
+          </span>
+        </div>
+        <Switch
+          id="social_emails"
+          v-model:checked="notificationsForm.social_emails"
+        />
+      </div>
+
+      <div class="flex flex-row items-center justify-between rounded-lg border p-4">
+        <div class="space-y-0.5">
+          <Label class="text-base" for="security_emails">
+            Security emails
+          </Label>
+          <span class="text-xs text-muted-foreground">
+            Receive emails about your account activity and security.
+          </span>
+        </div>
+        <Switch
+          id="security_emails"
+          v-model:checked="notificationsForm.security_emails"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="grid gap-2">
+      <div class="flex flex-row items-start space-x-3 space-y-0">
+        <Checkbox
+          id="mobile"
+          v-model:checked="notificationsForm.mobile"
+        />
+        <div>
+          <Label for="mobile">
+            Use different settings for my mobile devices
+          </Label>
+          <span class="text-xs text-muted-foreground">
+            You can manage your mobile notifications in the {{ " " }}
+            <a href="/examples/forms">mobile settings</a> page.
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update notifications
+      </Button>
+    </div>
+  </form>
+</template>

apps/www/src/examples/forms/components/ProfileForm.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as z from 'zod'
+import { cn } from '@/lib/utils'
+
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
+
+const profileForm = ref({
+  username: '',
+  email: '',
+  bio: 'I own a computer.',
+  urls: [
+    { value: 'https://shadcn.com' },
+    { value: 'http://twitter.com/shadcn' },
+  ],
+})
+
+const profileFormSchema = z.object({
+  username: z
+    .string()
+    .min(2, {
+      message: 'Username must be at least 2 characters.',
+    })
+    .max(30, {
+      message: 'Username must not be longer than 30 characters.',
+    }),
+  email: z
+    .string({
+      required_error: 'Please select an email to display.',
+    })
+    .email(),
+  bio: z.string().max(160, { message: 'Bio must not be longer than 160 characters.' }).min(4, { message: 'Bio must be at least 2 characters.' }),
+  urls: z
+    .array(
+      z.object({
+        value: z.string().url({ message: 'Please enter a valid URL.' }),
+      }),
+    )
+    .optional(),
+})
+
+type ProfileFormValues = z.infer<typeof profileFormSchema>
+const errors = ref<z.ZodFormattedError<ProfileFormValues> | null>(null)
+
+async function handleSubmit() {
+  const result = profileFormSchema.safeParse(profileForm.value)
+  if (!result.success) {
+    errors.value = result.error.format()
+    return
+  }
+  errors.value = null
+  console.log('Form submitted!')
+}
+</script>
+
+<template>
+  <div>
+    <h3 class="text-lg font-medium">
+      Profile
+    </h3>
+    <p class="text-sm text-muted-foreground">
+      This is how others will see you on the site.
+    </p>
+  </div>
+  <Separator />
+  <form class="space-y-8" @submit.prevent="handleSubmit">
+    <div class="grid gap-2">
+      <Label for="username" :class="cn('text-sm', errors?.username && 'text-destructive')">
+        Username
+      </Label>
+      <Input id="username" v-model="profileForm.username" placeholder="shadcn" />
+      <span class="text-muted-foreground text-sm">
+        This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days.
+      </span>
+      <div v-if="errors?.username" class="text-sm text-destructive">
+        <span v-for="error in errors.username._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="email" :class="cn('text-sm', errors?.email && 'text-destructive')">
+        Email
+      </Label>
+      <Select id="email" v-model="profileForm.email">
+        <SelectTrigger>
+          <SelectValue placeholder="Select an email" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem v-for="email in verifiedEmails" :key="email" :value="email">
+              {{ email }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <span class="text-muted-foreground text-sm">
+        You can manage verified email addresses in your email settings.
+      </span>
+      <div v-if="errors?.email" class="text-sm text-destructive">
+        <span v-for="error in errors.email._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="bio" :class="cn('text-sm', errors?.bio && 'text-destructive')">
+        Bio
+      </Label>
+      <Textarea id="bio" v-model="profileForm.bio" placeholder="Tell us about yourself." />
+      <span class="text-muted-foreground text-sm">
+        You can @mention other users and organizations to link to them.
+      </span>
+      <div v-if="errors?.bio" class="text-sm text-destructive">
+        <span v-for="error in errors.bio._errors" :key="error">{{ error }}</span>
+      </div>
+    </div>
+    <div class="grid gap-2">
+      <Label for="urls" :class="cn('text-sm', errors?.urls && 'text-destructive')">
+        URLs
+      </Label>
+      <Input v-for="(url, index) in profileForm.urls" id="urls" :key="index" v-model="url.value" />
+      <div v-if="errors?.urls" class="text-sm text-destructive">
+        <span v-for="error in errors.urls._errors" :key="error">{{ error }}</span>
+      </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        class="text-xs w-20 mt-2"
+        @click="profileForm.urls?.push({ value: '' })"
+      >
+        Add URL
+      </Button>
+    </div>
+    <div class="flex justify-start">
+      <Button type="submit">
+        Update profile
+      </Button>
+    </div>
+  </form>
+</template>

apps/www/src/examples/forms/components/SidebarNav.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
+
+interface Item {
+  title: string
+  href: string
+}
+
+const $route = useRoute()
+
+const sidebarNavItems: Item[] = [
+  {
+    title: 'Profile',
+    href: '/examples/forms/forms',
+  },
+  {
+    title: 'Account',
+    href: '/examples/forms/account',
+  },
+  {
+    title: 'Appearance',
+    href: '/examples/forms/appearance',
+  },
+  {
+    title: 'Notifications',
+    href: '/examples/forms/notifications',
+  },
+  {
+    title: 'Display',
+    href: '/examples/forms/display',
+  },
+]
+</script>
+
+<template>
+  <nav class="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
+    <Button
+      v-for="item in sidebarNavItems"
+      :key="item.title"
+      as="a"
+      :href="item.href"
+      variant="ghost"
+      :class="cn(
+        'w-full text-left justify-start',
+        $route.path === `${item.href}.html` && 'bg-muted hover:bg-muted',
+      )"
+    >
+      {{ item.title }}
+    </Button>
+  </nav>
+</template>

apps/www/src/examples/forms/layouts/FormsLayout.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import SidebarNav from '../components/SidebarNav.vue'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+</script>
+
+<template>
+  <div class="md:hidden" />
+  <div class="hidden space-y-6 p-10 pb-16 md:block">
+    <div class="space-y-0.5">
+      <h2 class="text-2xl font-bold tracking-tight">
+        Settings
+      </h2>
+      <p class="text-muted-foreground">
+        Manage your account settings and set e-mail preferences.
+      </p>
+    </div>
+    <Separator class="my-6" />
+    <div class="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
+      <aside class="-mx-4 lg:w-1/5">
+        <SidebarNav />
+      </aside>
+      <div class="flex-1 lg:max-w-2xl">
+        <div class="space-y-6">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/www/src/lib/registry/default/ui/radio-group/RadioGroup.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<RadioGroupRootProps & { class?: string }>()
+
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="props">
+  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
     <slot />
   </RadioGroupRoot>
 </template>

apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<RadioGroupRootProps & { class?: string }>()
+
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="props">
+  <RadioGroupRoot :class="cn('grid gap-2', props.class)" v-bind="{ ...props, ...emitsAsProps }">
     <slot />
   </RadioGroupRoot>
 </template>

apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue

@@ -33,7 +33,7 @@ const emitsAsProps = useEmitAsProps(emits)
     >
       <SelectViewport
         :class="
-          cn('p-1',
+          cn('p-0',
              position === 'popper'
                && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
       >

apps/www/src/lib/registry/new-york/ui/select/SelectTrigger.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
     v-bind="props"
     :class="[
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       ),
       props.invalid