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
  • Anatomy
  • Examples
  • Label and description
  • Validation error
  • Compact control
  • Workspace
  • Reference
  • Small
  • Large
  • Recommendations
  • Usage boundaries
  • API reference

Forms

Field

Connects labels, controls, help text, and validation.

idle

Usage

import { Field, FieldDescription, FieldLabel } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Field>
	<FieldLabel />
	<FieldDescription />
</Field>

Examples

Label and description

Field connects the label and description to its control.

Validation error

This example displays an existing error. The application decides when validation fails and when to clear it.

Compact control

FieldControl provides a compact input for dense forms.

Workspace

Disabled fields communicate that the setting is managed elsewhere.

Reference

Read-only fields remain available for selecting and copying.

Small

Use this size to match the density of the surrounding interface.

Large

Use this size to match the density of the surrounding interface.

Recommendations

GuidancePractice
Do

Compose the label, control, description, and error together. Explain how to correct an invalid value.

Do

Clicking FieldLabel focuses its control. FieldDescription and visible FieldError text describe that control to assistive technology.

Do

Static composition can live in a Server Component. Validation functions, bound form state, and event handlers belong in a Client Component.

Usage boundaries

GuidanceBoundary
Scope

Field connects accessible descriptions. Business rules and server validation remain application responsibilities.

API reference

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

PropTypeDefaultDescription
FieldFieldProps—Use either a bound field or the unbound Base UI field contract.
BoundFieldPropsBoundFieldProps—Connects a field to an existing Mizen field object.
UnboundFieldPropsUnboundFieldProps—Uses Base UI field state and validation props.
FieldLabelFieldLabelProps<label>Labels the associated control.
FieldControlFieldControlProps—Provides the Base UI control render slot.
FieldDescriptionFieldDescriptionProps<div>Adds descriptive help text.
FieldErrorFieldErrorProps<div>Renders the current validation message.
FieldValiditychildren: ReactNode—Composes a validity state for bound fields.
PreviousDate-Time InputNextFieldset

We only use this for account updates.

Used for project updates.

Enter a project name.