FormsCN

Form Fields

FormSCN provides a comprehensive set of form field components built on top of shadcn/ui.

Overview

All form fields in FormSCN use standard shadcn/ui components, giving you:

  • Full customization: Style with Tailwind CSS
  • Accessibility: ARIA labels, keyboard navigation, screen reader support
  • Consistency: Matches your existing shadcn/ui design system
  • Type safety: Full TypeScript support

The Form Builder automatically detects which shadcn components your form needs and provides the installation command.

Available Fields

Text Input

Basic text input field for single-line text. Supports various input types.

React Hook Form:

<Input
  type="text"
  placeholder="Enter your name"
  {...register("name")}
/>

TanStack Form:

<form.Field name="name">
  {(field) => (
    <Input
      type="text"
      placeholder="Enter your name"
      value={field.state.value}
      onChange={(e) => field.handleChange(e.target.value)}
    />
  )}
</form.Field>

Props:

  • type: Input type (text, email, password, number, url, tel)
  • placeholder: Placeholder text
  • disabled: Disable the input
  • required: Make field required

shadcn component: input

Textarea

Multi-line text input for longer content.

<Textarea
  placeholder="Enter your message"
  rows={4}
  {...register("message")}
/>

Props:

  • rows: Number of visible rows
  • placeholder: Placeholder text
  • disabled: Disable the textarea

shadcn component: textarea

Select

Dropdown select field with customizable options.

<Select onValueChange={(value) => setValue("country", value)}>
  <SelectTrigger>
    <SelectValue placeholder="Select a country" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="us">United States</SelectItem>
    <SelectItem value="uk">United Kingdom</SelectItem>
    <SelectItem value="ca">Canada</SelectItem>
  </SelectContent>
</Select>

Props:

  • options: Array of \{ label: string, value: string \} objects
  • placeholder: Placeholder text
  • disabled: Disable the select

shadcn components: select, select-trigger, select-content, select-item

Checkbox

Boolean checkbox field.

<div className="flex items-center space-x-2">
  <Checkbox
    id="terms"
    {...register("terms")}
  />
  <label htmlFor="terms">
    I agree to the terms and conditions
  </label>
</div>

Props:

  • checked: Controlled checked state
  • onCheckedChange: Change handler
  • disabled: Disable the checkbox

shadcn component: checkbox

Radio Group

Single selection from multiple options.

<RadioGroup onValueChange={(value) => setValue("plan", value)}>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="free" id="free" />
    <label htmlFor="free">Free</label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="pro" id="pro" />
    <label htmlFor="pro">Pro</label>
  </div>
</RadioGroup>

Props:

  • options: Array of \{ label: string, value: string \} objects
  • defaultValue: Default selected value
  • disabled: Disable the radio group

shadcn component: radio-group

Switch

Toggle switch for boolean values.

<div className="flex items-center space-x-2">
  <Switch
    id="notifications"
    {...register("notifications")}
  />
  <label htmlFor="notifications">
    Enable notifications
  </label>
</div>

Props:

  • checked: Controlled checked state
  • onCheckedChange: Change handler
  • disabled: Disable the switch

shadcn component: switch

Date Picker

Date selection field with calendar popup.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">
      {date ? format(date, "PPP") : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent>
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
    />
  </PopoverContent>
</Popover>

Props:

  • mode: "single" | "range" | "multiple"
  • selected: Selected date(s)
  • onSelect: Selection handler
  • disabled: Disable dates

shadcn components: popover, calendar, button

Field Validation

All fields support validation through Zod schemas. FormSCN auto-generates the schema based on your field configuration.

Example schema:

const schema = z.object({
  email: z.string().email("Invalid email"),
  age: z.number().min(18, "Must be 18 or older"),
  website: z.string().url().optional(),
  terms: z.boolean().refine((val) => val === true, {
    message: "You must accept the terms",
  }),
});

Validation rules supported:

  • Required fields
  • Email format
  • URL format
  • Minimum/maximum length
  • Pattern matching (regex)
  • Custom validation messages

Error Handling

Display validation errors below fields automatically.

React Hook Form:

{errors.email && (
  <p className="text-sm text-destructive">
    {errors.email.message}
  </p>
)}

TanStack Form:

<form.Field name="email">
  {(field) => (
    <>
      <Input
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      {field.state.meta.errors.length > 0 && (
        <p className="text-sm text-destructive">
          {field.state.meta.errors[0]}
        </p>
      )}
    </>
  )}
</form.Field>

Accessibility

All field components are built with accessibility in mind:

  • ARIA labels: Proper labeling for screen readers
  • Keyboard navigation: Tab through fields, space/enter for toggles
  • Screen reader support: Descriptions and error announcements
  • Focus management: Visible focus states and logical tab order
  • Error announcements: Errors are announced to assistive technology

Styling

Customize fields with Tailwind CSS classes. All components use shadcn/ui's design system.

<Input
  className="max-w-md border-2 focus:border-primary"
  {...register("name")}
/>

Common styling patterns:

Field sizing:

<Input className="h-12 text-lg" /> {/* Large */}
<Input className="h-8 text-sm" />   {/* Small */}

Validation states:

<Input 
  className={errors.email ? "border-destructive" : ""}
/>

Layout:

<div className="grid grid-cols-2 gap-4">
  <Input {...register("firstName")} />
  <Input {...register("lastName")} />
</div>

shadcn Dependencies

Each field type requires specific shadcn components:

| Field Type | shadcn Components | |------------|-------------------| | Text Input | input, form | | Textarea | textarea, form | | Select | select, form | | Checkbox | checkbox, form | | Radio Group | radio-group, form | | Switch | switch, form | | Date Picker | popover, calendar, button, form |

The Form Builder automatically detects which components you need and provides the installation command:

npx shadcn@latest add input textarea select checkbox radio-group switch popover calendar button form

Form Library Support

All fields work with both form libraries:

  • React Hook Form: useForm, register, Controller
  • TanStack Form: useForm, form.Field, field state management

The Form Builder generates the correct code based on your selected library.

Next Steps

Form BuilderOpen Source