shadcn/ui

The @form-wire/shadcn package provides createShadcnMapper — an adapter that bridges shadcn/ui visual primitives to Form Wire's mapper interface.

Form Wire owns form state and validation. Pass shadcn visual primitives such as Input, Label, Button, Checkbox, Textarea, Select, and the newer Field layout components. Do not pass anything from components/ui/form.

Installation

bun add @form-wire/shadcn

Usage

Pass your shadcn/ui components to createShadcnMapper and get back a FormWireMapper:

import { createShadcnMapper } from "@form-wire/shadcn";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select";
import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
} from "@/components/ui/field";

export const shadcnMapper = createShadcnMapper({
  Input,
  Textarea,
  Checkbox,
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  Button,
  Label,
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
});

Then use it with FormWireProvider:

<FormWireProvider mapper={shadcnMapper}>
  <Contact.Form action={submitContact} />
</FormWireProvider>

Required Components

Only Input is required — it renders text, email, number, date, and file inputs.

Optional Components

Component	Affects	Fallback
`Textarea`	Multiline string fields	Uses `Input`
`Checkbox`	Boolean fields	Native `<input type="checkbox">`
`Select` + sub-components	Select fields	Native `<select>`
`Button`	Submit button	Native `<button>`
`Label`	Field labels	Native `<label>`
`Field` + `FieldLabel` + `FieldDescription` + `FieldError`	Field wrapper layout	Basic div layout
`Alert`	Form messages	Native `<p>`
`Skeleton`	Loading states	Hidden (no display)
`Fieldset`	Group wrapper	Native `<fieldset>`

How It Works

createShadcnMapper returns a FormWireMapper that maps Form Wire's field props to shadcn/ui component props
For Radix Select: synthesizes a change event from onValueChange to bridge to Form Wire's onChange
For Checkbox: uses onCheckedChange with boolean values
Field wrappers use Label and a basic layout by default. If provided, shadcn's Field components handle label, description, and error layout.

Partial Setup

You don't need all components. Only pass what you have:

const mapper = createShadcnMapper({
  Input,
  Button,
  Label,
});

Missing components fall back to native HTML elements. Mapper keys that have no corresponding component are simply omitted (Form Wire uses its own fallbacks).