Form

free

Form keeps create and edit flows readable from input to validation.

import { useState } from 'react';
import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Form

pnpm dlx nateui@latest add Form

yarn dlx nateui@latest add Form

Examples

Basic

import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

Form Layout

import { useState } from 'react';
import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

Form Size

import { useState } from 'react';
import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

Label Extra

import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

Message

import { PiQuestion } from 'react-icons/pi'
import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

Validation

import { useState, type FormEvent } from 'react';
import Button from '@/components/ui/button';
import Form from '@/components/ui/form';
import Input from '@/components/ui/input';

API

Form is a compound component: the root Form, Form.Field for label/control/error composition, and Form.Scope for nested layout or sizing context.

Form

Prop	Description	Type	Default
`children`	Fields, scopes, and form content rendered inside the native form.	`ReactNode`	-
`className`	Class names applied to the native `form` element.	`string`	-
`containerClassName`	Class names applied to the internal `Form.Scope` wrapper.	`string`	-
`labelWidth`	Label width shared by child fields when the layout is horizontal.	`string \| number`	`100`
`layout`	Layout shared by child fields.	`FormLayout`	`'vertical'`
`ref`	Ref forwarded to the native `form` element.	`Ref<HTMLFormElement>`	-
`size`	Control size shared by descendant form-aware controls.	`ControlSize`	`'md'`
`...nativeFormProps`	Native props applied to the `form` element.	`NativeFormProps`	-

Form.Field

Prop	Description	Type	Default
`asterisk`	Shows a destructive required marker before the label.	`boolean`	-
`children`	The control or content rendered under the label.	`ReactNode`	-
`className`	Class names applied to the field wrapper.	`string`	-
`errorMessage`	Message rendered below the control when `invalid` is true, replacing `hint` while the field is invalid.	`string`	-
`extra`	Extra label-side content, such as optional text or a compact count.	`string \| ReactNode`	-
`hint`	Helper text rendered below the control when there is no invalid error message.	`string \| ReactNode`	-
`htmlFor`	Associates the label with a control id.	`string`	-
`invalid`	Marks the field invalid and provides invalid context to child controls.	`boolean`	-
`label`	Field label content.	`string \| ReactNode`	-
`labelClass`	Class names applied to the label element.	`string`	-
`labelId`	Id applied to the label element.	`string`	-
`labelWidth`	Overrides the scoped label width for this field.	`string \| number`	-
`layout`	Overrides the scoped layout for this field.	`FormLayout`	-
`ref`	Ref forwarded to the field wrapper.	`Ref<HTMLDivElement>`	-
`size`	Overrides the scoped control size for this field label.	`ControlSize`	-
`...nativeDivProps`	Native props applied to the field wrapper.	`NativeFieldProps`	-

Form.Scope

Prop	Description	Type	Default
`children`	Form fields that should share the scoped layout and size settings.	`ReactNode`	-
`className`	Class names applied to the scope wrapper.	`string`	-
`labelWidth`	Label width shared by child fields when horizontal.	`string \| number`	`100`
`layout`	Layout shared by child fields.	`FormLayout`	`'vertical'`
`size`	Control size shared by descendant form-aware controls.	`ControlSize`	`'md'`
`...nativeDivProps`	Native props applied to the scope wrapper.	`NativeScopeProps`	-

Types

type FormLayout = 'horizontal' | 'vertical' | 'inline';
type ControlSize = 'sm' | 'md' | 'lg';
type NativeFormProps = ComponentPropsWithoutRef<'form'>;
type NativeFieldProps = ComponentProps<'div'>;
type NativeScopeProps = ComponentProps<'div'>;