К содержимому
uiify

Фреймворк

Next.jsTanStack StartAstroVike

Стиль

CSSTailwind

Тема

Язык

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

Form

Форма с валидацией.

Браузеры
Chrome 123+Firefox 121+Safari 17.5+
Уровень
0
Сжатый размер
194 B
Лимит принудительной компоновки
0 ms
Лимит axe
0
Совместим с SSR
Да
Публичный контракт
Тестовый стенд

Песочница

Form

По умолчанию

Примеры

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

СвойствоТипПо умолчаниюОписание
onSubmit / onReset / action / method / refnative form props—Стандартные события формы и DOM ref передаются дальше. Formik и React Hook Form управляют значениями, ошибками и сбросом через свои обычные API.
validationBehavior"native" | "aria""native"Сообщает ли сам браузер о нарушениях ограничений, что работает без JavaScript, или валидация остаётся за атрибутами ARIA; «aria» задаёт noValidate.
renderReactElement | ((props, state) => ReactElement)—Заменяет отображаемый элемент, сохраняя поведение и связи доступности.

Клавиатура

КлавишаДействие
TabПеревести фокус на элемент управления или с него
Enter / SpaceАктивировать при наличии фокуса (для элементов управления типа кнопки)

Доступность

По возможности используется семантический HTML. Изучите разметку в песочнице: ARIA добавляется только там, где нативных элементов недостаточно.

Привязка стилей

data-disabled
Эта страница переведена автоматически и ещё не проверена.