Inputsreadycomponentready

Form

A native form and field wiring surface for labels, controls, descriptions, messages, server errors, and browser validation.

Importimport { Form, FormField, FormLabel, FormDescription, FormMessage } from 'radcn/form'

Preview

Live package example

Wire IDs and ARIA explicitly so native controls, server errors, and RadCN styling agree before hydration.

Server Error

Wire IDs and ARIA explicitly so native controls, server errors, and RadCN styling agree before hydration.

Preview

import { Button } from 'radcn/button'
import { Form, FormDescription, FormField, FormLabel, FormMessage, formControlAttributes, formFieldIds } from 'radcn/form'
import { Input } from 'radcn/input'

export function FormPreview() {
  let email = formFieldIds('signup-email')
  let control = formControlAttributes(email, { invalid: true, message: true })

  return (
    <Form action="/signup" method="post">
      <FormField invalid name="email">
        <FormLabel error for={control.id}>Email</FormLabel>
        <Input
          ariaDescribedBy={control.ariaDescribedBy}
          ariaInvalid={control.ariaInvalid}
          id={control.id}
          name="email"
          placeholder="name@example.com"
          required
          value="radcn"
        />
        <FormDescription id={email.descriptionId}>
          Use the email address for your workspace.
        </FormDescription>
        <FormMessage id={email.messageId}>Enter a valid email address.</FormMessage>
      </FormField>
      <Button type="submit">Create workspace</Button>
    </Form>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Form, FormField, FormLabel, FormDescription, FormMessage } from 'radcn/form'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

Renders a native form element, so browser validation and submission work without client JavaScript.
Provides deterministic ID helpers for control, description, and message elements.
Uses aria-describedby and aria-invalid on the actual form control instead of relying on hidden context.

Customization

Form parts expose data-radcn-form, data-radcn-form-field, data-radcn-form-label, data-radcn-form-description, and data-radcn-form-message hooks.
Invalid color and sizing inherit existing RadCN field tokens, including --radcn-field-error and --radcn-form-width.
Select, checkbox, radio, switch, textarea, repeated fields, and password-strength examples use existing package primitives and native control hooks.

Remix 3 Notes

shadcn/ui form is a React Hook Form adapter around context, Controller, Slot, and useFormState. RadCN does not port those React-only mechanics.
The Remix 3 port makes field wiring explicit through helpers and native attributes so server actions, native validation, and future enhancement can share the same markup.
Schema validation and form-state libraries remain app choices rather than RadCN package dependencies.
The upstream RHF, TanStack Form, Formisch, and Next examples map to behavior clusters in RadCN docs rather than one dependency-specific example per library.