1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980import React, { ReactElement } from "react";
import {
  Form,
  TextField,
  TextFieldWithMessage,
  useNumberField,
} from "@react-md/form";
import { Text } from "@react-md/typography";
import { Grid } from "@react-md/utils";

export default function Demo(): ReactElement | null {
  const [value1, field1Props] = useNumberField({
    id: "number-field-1",
    disableMessage: true,
  });
  const [value2, field2Props] = useNumberField({
    id: "number-field-2",
  });
  const [value3, field3Props] = useNumberField({
    id: "number-field-3",
    defaultValue: 0,
  });
  const [value4, field4Props] = useNumberField({
    id: "number-field-4",
    min: 0,
    max: 10,
    defaultValue: 0,
    updateOnChange: false,
  });
  const [value5, field5Props] = useNumberField({
    id: "number-field-5",
    min: 0,
    max: 10,
    step: 2,
    defaultValue: 0,
    validateOnChange: true,
  });
  return (
    <Form>
      <Grid columns={1} clone>
        <Text margin="none">
          value1: <code inline>{`${value1}`}</code>
        </Text>
        <TextField {...field1Props} label="Field 1" placeholder="0" />
        <Text margin="top">
          value2: <code inline>{`${value2}`}</code>
        </Text>
        <TextFieldWithMessage
          {...field2Props}
          label="Field 2"
          placeholder="0"
        />
        <Text margin="none">
          value3: <code inline>{`${value3}`}</code>
        </Text>
        <TextFieldWithMessage
          {...field3Props}
          label="Field 3"
          placeholder="0"
        />
        <Text margin="none">
          value4: <code inline>{`${value4}`}</code>
        </Text>
        <TextFieldWithMessage
          {...field4Props}
          label="Field 4"
          placeholder="0"
        />
        <Text margin="none">
          value5: <code inline>{`${value5}`}</code>
        </Text>
        <TextFieldWithMessage
          {...field5Props}
          label="Field 5"
          placeholder="0"
        />
      </Grid>
    </Form>
  );
}