‮Skip to content‬
uiify

‮Framework‬

‮Next.js‬‮TanStack Start‬‮Astro‬‮Vike‬

‮Style‬

‮CSS‬‮Tailwind‬

‮Theme‬

‮Language‬

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)Pseudo (accented)Pseudo (bidi)

Form

‮Form with validation behavior.‬

‮Browsers‬
Chrome 123+Firefox 121+Safari 17.5+
‮Tier‬
0
‮Bundle compressed‬
194 B
‮Forced layout budget‬
0 ms
‮Axe budget‬
0
‮SSR compatible‬
‮Yes‬
‮Published contract‬
‮Test harness‬

‮Playground‬

Form

‮Default‬

‮Examples‬

Formik

Native events and controlled values connect directly to Formik. Validation, touched errors, submit and reset are live.

We will use this address for account updates.

import { useFormik } from "formik";
import { Form, Field, Button } from "@gunkin/uiify";
export default function Example() {
  const formik = useFormik({ initialValues: { email: "" }, validate: ({ email }) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? {} : { email: "Enter a valid email address" }, onSubmit: (values) => alert(values.email) });
  return <Form validationBehavior="aria" onSubmit={formik.handleSubmit} onReset={formik.handleReset}><Field.Root id="email"><Field.Label fieldId="email">Email</Field.Label><Field.Control as="input" fieldId="email" type="email" {...formik.getFieldProps("email")} /><Field.Error fieldId="email" invalid={Boolean(formik.touched.email && formik.errors.email)}>{formik.errors.email}</Field.Error><Button type="submit">Save</Button><Button type="reset">Reset</Button></Field.Root></Form>;
}

React Hook Form

The native input ref lets React Hook Form register, validate and focus the control. Try submitting an empty field.

The input forwards its ref, name, change and blur events.

import { useForm } from "react-hook-form";
import { Form, Field, Button } from "@gunkin/uiify";
export default function Example() {
  const { register, handleSubmit, reset, formState: { errors } } = useForm({ defaultValues: { email: "" } });
  return <Form validationBehavior="aria" onSubmit={handleSubmit((values) => alert(values.email))} onReset={() => reset({ email: "" })}><Field.Root id="email"><Field.Label fieldId="email">Email</Field.Label><Field.Control as="input" fieldId="email" type="email" {...register("email", { required: "Enter an email address" })} /><Field.Error fieldId="email" invalid={Boolean(errors.email)}>{errors.email?.message}</Field.Error><Button type="submit">Save</Button><Button type="reset">Reset</Button></Field.Root></Form>;
}

‮API‬

Form

‮Prop‬‮Type‬‮Default‬‮Description‬
onSubmit / onReset / action / method / refnative form props—‮Standard form events and DOM ref are forwarded. Formik and React Hook Form manage values, errors and reset through their normal APIs.‬
validationBehavior"native" | "aria""native"‮Whether the browser reports constraint violations itself, which works without JavaScript, or validation is left to ARIA attributes; "aria" sets noValidate.‬
renderReactElement | ((props, state) => ReactElement)—‮Replace the rendered element while keeping behavior and accessibility wiring.‬

‮Keyboard‬

‮Key‬‮Action‬
Tab‮Move focus to/from the control‬
Enter / Space‮Activate when focused (button-like controls)‬

‮Accessibility‬

‮Uses semantic HTML where possible. Inspect rendered markup in the playground — ARIA is added only when native elements are insufficient.‬

‮Styling hooks‬

data-disabled