NumberField

NumberField renders a Cratis-owned native numeric input with optional constraints.

Usage

import { CommandDialog } from '@cratis/components/CommandDialog';
import { NumberField } from '@cratis/components/CommandForm';

<CommandDialog command={MyCommand} visible={visible} onCancel={() => setVisible(false)}>
    <NumberField<MyCommand> value={c => c.quantity} min={1} max={100} />
    <NumberField<MyCommand> value={c => c.price} min={0} step={0.01} placeholder="0.00" />
</CommandDialog>

Props

Prop	Type	Default	Description
value	(instance: TCommand) => unknown	—	Required. Accessor function that returns the bound property from the command instance. Pass the command type as the generic parameter for full type safety.
placeholder	string	—	Placeholder text shown when the field is empty.
min	number	—	Minimum allowed value.
max	number	—	Maximum allowed value.
step	number	—	Increment/decrement step size.

Behavior

• Default value is 0.
• The field spans full width within its container.
• Validation state is reflected through aria-invalid and data-invalid.
• When the value is cleared, it falls back to 0.