Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Numeric

A numeric component is an input field specifically designed for entering numeric values in a user interface.

numeric
  • Overview
  • Specs
  • Guidelines

Component

A numeric component is an input field tailored for entering numeric values into a user interface. It enables users to input numerical data, like integers or decimal numbers, using various input methods such as keyboard entry.

The component typically offers features such as validation to accept only numeric characters, as well as options for formatting, such as specifying decimal places or setting value limits.

Numeric components find frequent use in forms, calculators, and applications requiring precise numerical input.

Numeric_Anatomy
Numeric Anatomy

A: Big Amounts Variation

B: Small Amounts Variation

1: Label

2: Chip

3: Spinners

4: Value

Numeric_inside_InlineTable
Numeric applied in an inline table

Used for:

Forms

When numeric values are expected, such as a price or a discount percentage on invoices, the numeric component is the one to use;

Efficiency

They streamline data entry by providing a dedicated input field specifically designed for numeric values, enhancing user productivity;

Clarity

Numeric components clearly communicate the expected input type, reducing ambiguity and improving user understanding;

Accessibility

They enhance accessibility by providing a clear and intuitive interface for users with different abilities to input numerical data.

Don’t use for:

Non-numeric data

If the input requires non-numeric data, such as text or dates, a numeric input component would not be suitable and could lead to user confusion or errors;

Complex data entry

For scenarios where data entry involves complex numeric calculations or requires additional context beyond simple numerical values, a dedicated numeric input component may not provide sufficient functionality;

Dynamic data entry

If the input requirements are dynamic and may change frequently based on user interactions or contextual factors, a static numeric input component may not be adaptable enough to accommodate these variations.

Numeric_withLetters
Numeric applied with letters

Demo

Access the Figma file and inspect the element using Dev Mode.

demo-numeric
Numeric at Figma
Open Figma

Last Update

Numeric_before
Old version of Numeric
Numeric_Current
Current version of Numeric
  • Updated typography;
  • Updated icon font;
  • Removed unnecessary variations;

Related

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …
Read More

Forms

Under Maintenance …
Read More

Expander

Under Maintenance …
Read More

Variations

Numeric
Numeric

Big Amounts

Enabled 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--grey-5);
  field-background: var(--grey-1);
  value: var(--grey-6);
  spinner-up: var(--grey-7);
  spinner-down: var(--grey-6);
}
Hover 
.hover {
  label: var(--grey-7);
  field-stroke: var(--grey-6);
  field-background: var(--grey-1);
  value: var(--grey-6);
  spinner-up: var(--grey-7);
  spinner-down: var(--grey-6);
}
Focus 
.focus {
  label: var(--grey-7);
  field-stroke: var(--theme-100);
  field-background: var(--grey-1);
  insert: var(--grey-8);
  spinner-up: var(--grey-7);
  spinner-down: var(--grey-6);
}
Read-only 
.readOnly {
  label: var(--grey-7);
  field-stroke: var(--grey-3);
  field-background: var(--grey-1);
  value: var(--grey-6);
  spinner-up: var(--grey-7);
  spinner-down: var(--grey-6);
}
Disabled 
.focus {
  label: var(--grey-7);
  field-stroke: var(--grey-5);
  field-background: var(--grey-3);
  value: var(--grey-6);
  spinner-up: var(--grey-6);
  spinner-down: var(--grey-6);
}
Error 
.error {
  label: var(--grey-7);
  field-stroke: var(--error-100);
  field-background: var(--grey-1);
  value: var(--grey-6);
  spinner-up: var(--grey-7);
  spinner-down: var(--grey-6);
}

Small Amounts

Enabled 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--grey-5);
  field-background: var(--grey-1);
  value: var(--grey-6);
  leftIndicator-background: var(--grey-4);
  leftIndicator: var(--grey-8);
  rightIndicator-background: var(--theme-20);
  rightIndicator: var(--theme-100);
}
Hover 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--grey-6);
  field-background: var(--grey-1);
  value: var(--grey-6);
  leftIndicator-background: var(--grey-4);
  leftIndicator: var(--grey-8);
  rightIndicator-background: var(--theme-20);
  rightIndicator: var(--theme-100);
}
Focus 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--theme-100);
  field-background: var(--grey-1);
  insert: var(--grey-8);
  leftIndicator-background: var(--grey-4);
  leftIndicator: var(--grey-8);
  rightIndicator-background: var(--theme-20);
  rightIndicator: var(--theme-100);
}
Read-only 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--grey-3);
  field-background: var(--grey-1);
  value: var(--grey-6);
  leftIndicator-background: var(--grey-4);
  leftIndicator: var(--grey-8);
  rightIndicator-background: var(--theme-20);
  rightIndicator: var(--theme-100);
}
Disabled 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--grey-5);
  field-background: var(--grey-3);
  value: var(--grey-6);
  leftIndicator-background: var(--grey-4);
  leftIndicator: var(--grey-8);
  rightIndicator-background: var(--theme-20);
  rightIndicator: var(--theme-100);
}
Error 
.enabled {
  label: var(--grey-7);
  field-stroke: var(--error-100);
  field-background: var(--grey-1);
  value: var(--grey-6);
  leftIndicator-background: var(--grey-4);
  leftIndicator: var(--grey-8);
  rightIndicator-background: var(--theme-20);
  rightIndicator: var(--theme-100);
}

Size

Small 
.small {
  label: var(--label-small);
  gap: 4px;
  
  Field {
    gap: 4px;
    padding: var(--spacing-4, 0);
    button-icons: var(--small-secondary-grey, --small-secondary-theme);
    value: var(--label-small);
  }
}
Regular 
.regular {
  label: var(--label-regular);
  gap: 4px;
  
  Field {
    gap: 8px;
    padding: var(--spacing-4, 0);
    button-icons: var(--regular-secondary-grey, --regular-secondary-theme);
    value: var(--label-regular);
  }
}
Large 
.large {
  label: var(--label-large);
  gap: 4px;
  
  Field {
    gap: 8px;
    padding: var(--spacing-4, 0);
    button-icons: var(--large-secondary-grey, --large-secondary-theme);
    value: var(--large-large);
  }
}

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component
polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Minimum Width

By default, numeric components tend to be narrower than the other inputs, such as text fields or select boxes, so it is necessary to apply a minimum width to the component, which is applied by size:

  • Small: 100px min-width;
  • Regular: 120px min-width;
  • Large: 140px min-width.
MinWidth
Minimum width of each size

Validation

In order to avoid user frustration, there is an built-in validation inside the numeric that allows for real-time feedback, which is given when the user leaves the focus state.

This feedback is provided for the following cases:

  • Range of values;
  • Positive values;
  • Positive and negative values;
  • Minimum value;
  • Maximum value.
Error_Validation
Validation Error in a Numeric

Dos & Dont’s

Decimal Values
Don’t

Small amounts variation with decimal places;

Change_Place
Don’t

Change the button position;

Too_much_Info
Caution

Using chips, tooltip and label at the same time, simplifying information is ideal;

Case Studies

Building a new Seamless User Experience

Using a design system is like having a set of building blocks for creating digital products. It ensures everything looks …
Read More

Discover the exciting features

Compose Design brings a host of thrilling and transformative new features designed to enhance your experience. Dive into our latest …
Read More

Benefits of a Design System

A design system is a collection of reusable components and guidelines that ensure consistency and efficiency in building digital products …
Read More

References

Outline