Decimal Input

Locale-aware numeric input interface for Directus numeric fields.

It stores a normalized decimal value and formats the visible value using the browser locale when the field loses focus. If the field does not have saved option values, the interface defaults to a minimum of 2 decimals.

Demo

Features

• Accepts . or , while typing
• Formats on blur using the browser locale
• Stores a normalized decimal value
• Supports min/max range validation
• Supports configurable minimum and maximum decimals
• Supports left and right icons
• Supports font presets: Sans serif, Serif, Monospace
• Supports integer, float, and decimal Directus field types
• Reads saved field options from the Directus field metadata at runtime

Options

• minimum_value: minimum allowed numeric value
• maximum_value: maximum allowed numeric value
• minimum_decimals: minimum visible decimals
• maximum_decimals: maximum decimals used for rounding
• icon_left: icon displayed at the left side of the input
• icon_right: icon displayed at the right side of the input
• font: font preset for the input text

Behavior

• While typing, the user can enter the value freely.
• When the field loses focus, the value is formatted using the browser locale.
• The stored value remains normalized.
• Rounding is applied according to maximum_decimals.
• If the field has no saved options, minimum_decimals falls back to 2.

Development

npm install
npm run build
npm run dev

License

MIT