Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Create your profile
  • Recommendations
  • Usage boundaries
  • API reference

Forms

Form

Orchestrates form state, validation, focus management, and async submission.

idle

Usage

import { useForm } from "@mizen-labs/ui";

Examples

Create your profile

Recommendations

GuidancePractice
Do

Show field errors near their controls. Preserve values after failed submission and provide a clear retry action.

Usage boundaries

GuidanceBoundary
Scope

Form coordinates client validation and submission. The server must validate submitted data and authorize mutations.

Scope

The focused example validates local form state. It does not persist data.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
useFormtypeof useForm—Creates a TanStack React Form instance; the application owns its schema and submission.
focusFirstInvalidControl(form: HTMLFormElement | null | undefined) => boolean—Focuses the first enabled control marked aria-invalid=true.
PreviousFile UploadNextInput

Shown to other workspace members.

Create your profile

Choose how your team will recognize you.

Choose a unique username for your profile.

We will use this address for account verification.