Thành phần

Form

Validated forms on Base UI Form and Field with react-hook-form and zod; errors shown by ink rules, icons and an error summary at the top on submit.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/form

This installs react-hook-form, @hookform/resolvers and zod, and the field item.

Usage

tsx

const schema = z.object({ headline: z.string().min(5, "Enter a headline of at least 5 characters.") });

const form = useForm<z.input<typeof schema>, unknown, z.output<typeof schema>>({
  resolver: zodResolver(schema),
  defaultValues: { headline: "" },
});

<Form form={form} onSubmit={(values) => send(values)}>
  <FormErrorSummary title={(count) => `Check ${count} fields before sending`} />
  <FormField
    control={form.control}
    name="headline"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Headline</FormLabel>
        <FormControl><input {...field} /></FormControl>
        <FormDescription>At least 5 characters.</FormDescription>
        <FormMessage />
      </FormItem>
    )}
  />
  <Button type="submit">Send to the desk</Button>
</Form>

FormControl takes one element and wires it to Base UI Field. Spread field on it. The examples use @eloquent/input (npx shadcn add @eloquent/input); the form component itself does not import it. Base UI controls that manage their own value (checkbox, select) are bound with field.value and field.onChange on their own props.

States

State	Treatment
Before submit	No summary and no messages
Failed submit	Summary block with a 2px ink left rule, ink ! icon, title and one entry per error; the first invalid control takes focus
Invalid field	2px ink left rule on the item, ink ! icon and Barlow 600 message
Valid submit	Your `onSubmit` runs; show a check icon and message
Disabled	Via Field `disabled`: halftone and `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Move through the summary entries (after a failed submit), the fields and the submit button
Enter	In a field, submits the form; on a summary entry, moves focus to that field
Space	Activates the focused button

Vietnamese

Ink adaptation

Upstream shadcn's red text-destructive is replaced by ink rules, a ! icon and words. The error summary is new: it lists every error, announces itself with role="alert" and leaves focus on the first invalid field. Built on Base UI Form and Field through @eloquent/field; react-hook-form holds the values.