NumberInput

Use NumberInput

NumberInput is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Field, NumberInput } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Field label="Seats">
        {(control) => <NumberInput {...control} name="seats" defaultValue={5} min={0} max={20} />}
      </Field>
    </FloodRoot>
  );
}

Design notes

• Values are finite numbers or null for an empty field. onValueChange reports edits and button/arrow steps; native min/max/step validity remains available. Out-of-bound typed values clamp on blur; a step mismatch remains native validation.
• Ref and native form attributes target the input. Controlled value stays host-owned; uncontrolled form reset restores the initial value. Buttons use explicit accessible names, which can be translated.
• Use Field for labels and feedback. Read-only remains selectable and prevents stepping. No currency/locale formatting or wheel interception is supplied. Available in 0.2.5.

API reference