Skip to content
uiify

Framework

Next.jsTanStack StartAstroVike

Style

CSSTailwind

Theme

Language

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

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

PropTypeDefaultDescription
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

KeyAction
TabMove focus to/from the control
Enter / SpaceActivate 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