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
  • Controlled value
  • Read-only
  • Disabled
  • Project identity
  • Small
  • Default size
  • Large
  • Invalid
  • Recommendations
  • Usage boundaries
  • API reference

Forms

Input

Captures a single line of text with quiet depth.

idle

Usage

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

Examples

Controlled value

Keep value and onValueChange together. The displayed value follows each edit.

Read-only

Use readOnly when users should focus, select, and copy an existing value.

Disabled

Disabled controls cannot be edited or focused and do not participate in native form submission.

Project identity

A short name makes a project easy to find.

Small

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

Default size

The default size suits general form layouts.

Large

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

Invalid

Keep values and validation readable in every state.

Recommendations

GuidancePractice
Do

Use a visible label and the appropriate native type and autocomplete value. Keep examples in help text.

Do

Input preserves native text editing and selection. Read-only values stay focusable; disabled values leave the tab order.

Do

Pass defaultValue from a Server Component for an uncontrolled input. Keep value and onValueChange together in a Client Component for controlled editing.

Usage boundaries

GuidanceBoundary
Scope

Use Textarea for multiline text and Number Field for numeric stepping. Placeholder text is not a label.

API reference

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

PropTypeDefaultDescription
valuestring—Controls the input value.
defaultValuestring—Sets the initial input value.
onValueChange(value: string, eventDetails) => void—Receives value changes from the Base UI input.
sizeInputSize"default"Selects the control size.
disabledbooleanfalsePrevents interaction and form editing.
invalidbooleanfalseMarks the input invalid when it is not bound to a Field.
readOnlybooleanfalsePrevents editing while keeping the value readable.
unstyledbooleanfalseUses the size treatment without the standard field surface.
PreviousFormNextInput group

Current value: Northstar

Changes stay in this preview.

This field is required.