--- title: "ShadcnVue" description: "Use NotForm with ShadcnVue inputs, including text, textarea, select, checkbox, radio group, switch, and array fields, and avoid the Field and FieldError naming conflict." canonical_url: "https://notformdocs.vercel.app/docs/integrations/shadcn-vue" --- > Index of every page on this site: [llms.txt](https://notformdocs.vercel.app/llms.txt) ShadcnVue copies component source into your project, so the exact props depend on the version you installed. The mappings below follow the pattern in [Custom components](https://notformdocs.vercel.app/docs/integrations/custom-components). Check your local component files if a binding differs. ## Resolve the naming conflict Recent ShadcnVue releases include `Field` and `FieldError` components. NotForm exports components with the same names. Rename one set at the import. ```vue [Vue] ``` ```ts [Nuxt] // nuxt.config.ts export default defineNuxtConfig({ modules: ['@notform/nuxt', 'shadcn-vue/nuxt'], notform: { aliases: { Field: 'NotField', FieldError: 'NotFieldError' }, }, }) ``` The examples below use `NotField` for NotForm and `Field` for ShadcnVue. ## Choose the right binding Every `NotField` slot gives you a `field` with a `model`, a set of `events`, and the validation state (`isValid` and `errors`). How you connect them depends on what the ShadcnVue component emits.
Component Binding
Input , Textarea , InputGroupInput , InputGroupTextarea v-model="field.model" and v-bind="field.events"
Select v-model="field.model" and @update:model-value="field.events.onChange" , with @blur="field.events.onBlur" on SelectTrigger
Checkbox , Switch , RadioGroup v-model="field.model" , @update:model-value="field.events.onChange" and @blur="field.events.onBlur"
Checkbox group (array of values) :model-value and a handler that updates field.model , then calls field.events.onChange()
Components that only emit `update:modelValue` don't fire native `input` or `change` events, so `v-bind="field.events"` does nothing for them. Report changes and blur explicitly instead. Each section below shows the template and the schema it binds to. The snippets assume the `form` and the imports from the [full example](#full-example). ## Text input ```ts title: z .string() .min(5, 'Bug title must be at least 5 characters.') .max(32, 'Bug title must be at most 32 characters.') ``` ```vue ``` `field.errors` is an array of issues that each have a `message`, which is the shape ShadcnVue's `FieldError` renders. ## Textarea Use `InputGroupTextarea` inside an `InputGroup` when you want an addon, such as a character counter. It takes the same bindings as a text input. ```ts description: z .string() .min(20, 'Description must be at least 20 characters.') .max(100, 'Description must be at most 100 characters.') ``` ```vue ``` `field.model` is reactive, so you can read it anywhere in the slot, which is how the counter stays in sync. ## Select The trigger is the focusable element, so put the `id` and report blur from it. ```ts language: z.string().min(1, 'Please select your spoken language.') ``` ```vue ``` Keep an empty string as the initial value so the placeholder shows until the user picks something. ## Checkbox Bind the checkbox with `v-model:model-value`, then report changes and blur to NotForm yourself: call `field.events.onChange` from `update:model-value` and `field.events.onBlur` from `blur`. ```ts responses: z.literal(true, 'Notifications are mandatory') ``` ```vue ``` If the checkbox can be in an indeterminate state, its value is not a plain boolean, so your schema must accept that. ## Checkbox group When several checkboxes share one field, store the selected values in an array. The checkbox doesn't bind to `field.model` directly. Instead, derive its checked state and write the new array back yourself. ```ts tasks: z .array(z.string()) .min(1, 'Please select at least one notification type.') ``` ```vue ``` Give each checkbox a unique `id` by appending the item's id to `field.path`, and call `field.events.onChange()` after you update the model so validation runs against the new value. ## Radio group Bind the group, not the items. Each `RadioGroupItem` only needs its own `value`. ```ts plan: z.string().min(1, 'You must select a subscription plan to continue.') ``` ```vue ``` ## Switch `Switch` follows the same pattern as `Checkbox`: a boolean model plus explicit change and blur handlers. ```ts twoFactor: z.boolean().refine((value) => { return value === true }, 'It is highly recommended to enable two-factor authentication.') ``` ```vue ``` ## Array fields Use `ArrayField` for lists the user can grow, shrink, and reorder. Each item exposes `item.field('key')`, so you can wrap any of the inputs above in a `NotField`. ```ts emails: z .array(z.object({ address: z.email('Enter a valid email address.'), })) .min(2, 'Add at least two email addresses.') .max(5, 'You can add up to 5 email addresses.') ``` ```vue ``` A few things to note: - `arrayField.items` gives you each item's `id` and `index`. Use `item.id` as the `:key`, not the index, so inputs keep their state when you reorder or remove items. - `arrayField.append`, `arrayField.remove` and `arrayField.move` change the list. Set `type="button"` on every button that calls them so they don't submit the form. - Errors for a single item come from its `field`. Errors for the list as a whole, such as the `min` and `max` rules, come from `arrayField.errors`. - Mirror the schema limits in the UI, as the **Add** button does with `arrayField.items.length >= 5`, so users can't reach an invalid state by clicking. ## Full example This form combines every input above. It assumes `vue`, `zod`, `@lucide/vue` and the ShadcnVue components you've added to your project. ```vue ``` ## Related - [Custom components](https://notformdocs.vercel.app/docs/integrations/custom-components) - [Nuxt module aliases](https://notformdocs.vercel.app/docs/getting-started/nuxt-module#avoid-name-conflicts) ## Sitemap See the full [sitemap](https://notformdocs.vercel.app/sitemap.md) for all pages.