Skip to content
MIZU.

FormField

A label, hint and error linked to a single control without manual IDs.

Live — this one is real

A name people can find

Usage

import { FormField } from "mizu-ui";

export function Example() {
  return (
    <FormField label="Project" hint="A name people can find">
      <input className="mizu-input" />
    </FormField>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Fields.tsx

Source is included in the npm package under src/forms/Fields.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Visible accessible label.
hint / errorReactNode / string—Description and validation feedback.
childrenReactElement—One control that accepts id and ARIA attributes.

Accessibility

The label, hint and error are linked by unique IDs. Errors are announced. Use one native control as the child.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

TextFieldTextAreaSelectFieldCheckbox