forms / stable

PropertyNumber

28px localized record number with suffix, bounds, stepping and nullable clearing; add property icons through PropertyField.

LIVE PREVIEW

Loading preview…

When to use

Estimate, actual effort, hours and quantities in a record rail.
Numbers have no option leading or icon prop. Wrap in PropertyField with icon for a labelled visual. Clearing returns null; zero remains zero; locale defaults to KitProvider.

Consider an alternative

IDs or phone numbers — use a text input.
Full form fields — use NumberField.

Import

import { PropertyNumber } from '@revido-llc/kit';

Keyboard interaction

↑ / ↓ — step
Type a localized number; blur commits
Clear — return null

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


label (required)	string	—
onChange (required)	(value: number \| null) => void	—
value (required)	number \| null	—
isDisabled	boolean	—
locale	string	—	Defaults to the locale supplied by KitProvider.
max	number	—
min	number	—
step	number	—
suffix	string	—

Examples

Suffix and bounds

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  return (
    <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate}
      suffix="SP" min={0} max={40} step={0.5}
      locale="en-US" isDisabled={false} />
  );
}

Decimal comma

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  return (
    <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate}
      suffix="h" min={0} max={8} step={0.5}
      locale="nl-NL" isDisabled={false} />
  );
}

Empty and zero

Clear the input to return null. A zero estimate stays visible.

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(null);
  return (
    <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate}
      suffix="SP" min={0} max={40} step={0.5}
      locale="en-US" isDisabled={false} />
  );
}

Property icon in the label

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  return (
    <PropertyField label="Estimate" icon={<Icon as={Clock} tone="tertiary" />}>
      <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate}
      suffix="SP" min={0} max={40} step={0.5}
      locale="en-US" isDisabled={false} />
    </PropertyField>
  );
}

Disabled

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  return (
    <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate}
      suffix="SP" min={0} max={40} step={0.5}
      locale="en-US" isDisabled={true} />
  );
}

Literal anatomy

Bind a localized number property in the consuming app.

import { useState } from "react";
import { PropertyNumber } from "@revido-llc/kit";
export default function PropertyAnatomy() {
  const [value, setValue] = useState<number | null>(3);
  return <PropertyNumber label="Estimate" value={value} suffix="points" onChange={setValue} />;
}