# antuikit / Form

> Form, with its validation feedback icons taken from the active icon pack.

Docs: https://antuikit.com/docs/components/form

## Install

npx antuikit@latest init
npx antuikit@latest add form

## Import

import { Form } from "@/components/ui/form";

## Demos

- [Basic](https://ui.antuikit.com/embed/form/basic.md): A sign-in form: each `Form.Item` takes a `name` and `rules`, and `onFinish` receives the values once every rule passes.
- [Layout](https://ui.antuikit.com/embed/form/layouts.md): Set `layout` to `horizontal`, `vertical` or `inline` to place labels beside, above or in a row with their controls.
- [Per-item layout](https://ui.antuikit.com/embed/form/item-layout-mix.md): Pass `layout="vertical"` to a single `Form.Item` to stack one field, like a long description, inside a horizontal form.
- [Size](https://ui.antuikit.com/embed/form/sizes.md): Set `size` on the `Form` to resize every control inside it at once: `small`, `medium` or `large`.
- [Variant](https://ui.antuikit.com/embed/form/variants.md): Set `variant` on the `Form` to give every control the same style: `outlined`, `filled`, `borderless` or `underlined`.
- [Disabled](https://ui.antuikit.com/embed/form/disabled.md): Set `disabled` on the `Form` to disable every control inside it at once, instead of passing it to each field.
- [Required mark](https://ui.antuikit.com/embed/form/required-mark.md): Set `requiredMark` to show the default asterisk, mark `optional` fields instead, hide the marks, or render your own with a function.
- [Validation rules](https://ui.antuikit.com/embed/form/validation.md): Stack `rules` on a `Form.Item` (required, length, pattern, number range), with `warningOnly` for a soft warning and `validateDebounce` to wait for a pause.
- [Field dependencies](https://ui.antuikit.com/embed/form/dynamic-rules.md): Use `dependencies` and a function rule that reads `getFieldValue` to check one field against another, like a password confirmation.
- [Repeated fields](https://ui.antuikit.com/embed/form/form-list.md): Use `Form.List` to render a repeatable group of fields, with `add` and `remove` for rows of environment variables.
- [Nested values](https://ui.antuikit.com/embed/form/nested-values.md): Pass an array to `name`, like `["user", "email"]`, to collect nested values, and `validateMessages` to word every error message once.
- [Submit when valid](https://ui.antuikit.com/embed/form/validate-only.md): Call `validateFields({ validateOnly: true })` on each change to enable Submit once the form is valid, without showing errors early.
- [Grouped controls](https://ui.antuikit.com/embed/form/multi-control.md): Nest `Form.Item`s with `noStyle` inside one labeled item to validate several controls, like city and street, as a single field.
- [Inside a modal](https://ui.antuikit.com/embed/form/form-in-modal.md): Put the `Form` inside a `Modal` and call `form.validateFields()` from `onOk`, so the dialog closes only once the values are valid.
- [Feedback icons](https://ui.antuikit.com/embed/form/feedback-icons.md): Set `hasFeedback` with `validateStatus` to show a success, warning, error or validating icon from your icon pack inside the control.
- [Workspace settings](https://ui.antuikit.com/embed/form/workspace-settings.md): A settings card that uses `Form.useWatch` to enable Save and Cancel only after a value changes, with a `Popconfirm` guarding delete.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/form`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Form` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.