form

shadcn-vue/form

FreeComponent

shadcn-vue publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by shadcn-vue on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://shadcn-vue.com/r/styles/new-york/form.json

Source

ui/form/FormControl.vueshadcn-vue.com/r/styles/new-york/form.json

1<script lang="ts" setup>
2import { Slot } from "reka-ui"
3import { useFormField } from "./useFormField"
4 
5const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
6</script>
7 
8<template>
9  <Slot
10    :id="formItemId"
11    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
12    :aria-invalid="!!error"
13  >
14    <slot />
15  </Slot>
16</template>

What it pulls in

npm packages

reka-ui
vee-validate
@vee-validate/zod
zod@3.25.76

Other registry items

label

Files it writes

ui/form/FormControl.vue
ui/form/FormDescription.vue
ui/form/FormItem.vue
ui/form/FormLabel.vue
ui/form/FormMessage.vue
ui/form/index.ts
ui/form/injectionKeys.ts
ui/form/useFormField.ts

More from shadcn-vue

All 65 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
accordionaccordion	shadcn-vue	Components	Free	2 deps · 5 files
alertalert	shadcn-vue	Components	Free	no deps · 4 files
alert-dialogalert-dialog	shadcn-vue	Components	Free	2 deps · 10 files
aspect-ratioaspect-ratio	shadcn-vue	Components	Free	1 dep · 2 files
attachmentattachment	shadcn-vue	Components	Free	1 dep · 10 files
avataravatar	shadcn-vue	Components	Free	2 deps · 4 files
badgebadge	shadcn-vue	Components	Free	2 deps · 2 files
breadcrumbbreadcrumb	shadcn-vue	Components	Free	1 dep · 8 files