Numeric input

import { FormGroup, NumericInput } from "@clawscale/react";

export default function NumericInputBasic() {
  return (
    <FormGroup label="Retention" labelInfo="(days)">
      <NumericInput aria-label="Retention in days" defaultValue={30} />
    </FormGroup>
  );
}

import { FormGroup, NumericInput } from "@clawscale/react";

export default function NumericInputStepSizes() {
  return (
    <FormGroup helperText="1 to 64. Shift steps by 8." label="Workers">
      <NumericInput
        aria-label="Workers"
        defaultValue={8}
        majorStepSize={8}
        max={64}
        min={1}
        minorStepSize={null}
        stepSize={1}
      />
    </FormGroup>
  );
}

import { FormGroup, NumericInput } from "@clawscale/react";

export default function NumericInputButtonPosition() {
  return (
    <>
      <FormGroup label="Batch size">
        <NumericInput aria-label="Batch size" buttonPosition="left" defaultValue={500} />
      </FormGroup>
      <FormGroup label="Priority">
        <NumericInput aria-label="Priority" buttonPosition="none" defaultValue={3} />
      </FormGroup>
    </>
  );
}

import { Button, ControlGroup, FormGroup, NumericInput } from "@clawscale/react";
import { useState } from "react";

export default function NumericInputControlled() {
  const [threshold, setThreshold] = useState("0.95");
  return (
    <FormGroup label="Alert threshold">
      <ControlGroup>
        <NumericInput
          aria-label="Alert threshold"
          majorStepSize={0.1}
          max={1}
          min={0}
          minorStepSize={0.001}
          stepSize={0.01}
          value={threshold}
          onValueChange={(_valueAsNumber, valueAsString) => setThreshold(valueAsString)}
        />
        <Button text="Reset" onClick={() => setThreshold("0.95")} />
      </ControlGroup>
    </FormGroup>
  );
}

import { FormGroup, NumericInput } from "@clawscale/react";
import { useState } from "react";

const INITIAL_LIMIT = 1250.5;
const usd = new Intl.NumberFormat("en-US", { currency: "USD", style: "currency" });

export default function NumericInputPrecision() {
  const [limit, setLimit] = useState(INITIAL_LIMIT);
  return (
    <FormGroup helperText={`${usd.format(limit)} per month`} label="Spend limit">
      <NumericInput
        aria-label="Spend limit in US dollars"
        clampValueOnBlur
        defaultValue={INITIAL_LIMIT}
        leftIcon="dollar"
        majorStepSize={1000}
        max={10000}
        min={0}
        minorStepSize={0.01}
        stepSize={50}
        onValueChange={(value) => setLimit(Number.isNaN(value) ? 0 : value)}
      />
    </FormGroup>
  );
}