Form

Highly configurable react-hook-form layout with a11y and field arrays.

When to use

Use Form when you need highly configurable react-hook-form layout with a11y and field arrays.

Import

TypeScript

import { Form } from '@gzodo/ui'

Form is configured at the root: density, orientation, size, label width, required mark, status colors, message placement, and classNames slots. Fields inherit those defaults and can override them. Spread controlProps onto controls for id, aria-*, disabled, color, and size.

Examples

Field

Minimal profile form with Form.Submit wired to isSubmitting.

Configurable

Horizontal labels, shared size, and actions aligned with actionsAlign.

Error message

Forced error status paints the label and control with the danger color.

Success

Success status via status and message.

Complete

Full-width demo with Section, Row, and FieldArray.

Form config

Property

Description

Type

Default

density

Spacing scale for gaps and padding.

'compact' | 'default' | 'comfortable'

'default'

orientation

Default field layout. Fields can override.

'vertical' | 'horizontal'

'vertical'

size

Default control size passed through controlProps.

'sm' | 'md' | 'lg' | 'xl'

—

labelWidth

Horizontal label column width. Number = px.

number | string

—

requiredIndicator

Required mark. false hides it.

ReactNode | false

'*'

keepDescriptionOnError

Keep helper text when an error is visible.

boolean

false

applyStatusColor

Map status onto controlProps.color.

boolean

true

messagePlacement

Where description/message sit relative to the control.

'below' | 'above'

'below'

classNames

Slot classes: root, field, label, control, message, section, row, actions, summary…

FormClassNames

—

actionsAlign

Default Form.Actions alignment.

'start' | 'center' | 'end' | 'between'

'end'

formatError / showSuccess

Defaults inherited by every Form.Field.

…

—

Form.Field

Property

Description

Type

Default

orientation / size / …

Any form config key can be overridden per field.

overrides

—

classNames

field, label, title, required, control, description, message.

FormFieldClassNames

—

renderLabel / renderDescription / renderMessage

Replace default markup while keeping ids/status.

slots

—

hideDescription / hideMessage

Force-hide helper or status text.

boolean

—

controlProps

id, aria-*, disabled, color, size. Spread onto the control.

FormControlProps

—

Helpers

Property

Description

Type

Default

Form.Section

Grouped fields.

title?, description?, classNames?

—

Form.Row

Responsive field grid.

columns?, gap?

—

Form.Actions

Footer actions.

align?

—

Form.Summary

Submit error list.

showOnMount?, renderItem?

—

Form.FieldArray

Dynamic lists.

useFieldArray

—

Form.Submit

Submit with isSubmitting loading.

Button

—

Tabs

DropDown