Number Field

Use cases:

• Numeric entry
• Not for cases where a field only contains numbers but should be a string e.g. credit card numbers or a phone number.

Example

Basic Number Field

Auto Step Precision - Try entering different decimal values (e.g., 100.5, 100.25, 100.125) and use step buttons

Step automatically adjusts: 1 for integers, 0.1 for 1 decimal, 0.01 for 2 decimals, etc.

Fixed Step (0.5) - Compare with auto step precision above

Maximum Input Precision (12 digits)

Values exceeding 12 significant digits will be truncated

Genesis

Declaration

<rapid-number-field></rapid-number-field>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-text-field value=${sync((x) => x.fieldValue, 'number')}>
    </rapid-text-field>
  `,
})
export class MyElement extends GenesisElement {
  @observable fieldValue = '';
  fieldValueChanged() {
    console.log(this.fieldValue);
  }
}

React

Declaration

<rapid-number-field></rapid-number-field>

Usage

export function MyComponent() {

  const [outputValue, setOutputValue] = useState('');

  const onChange = (event) => {
    setOutputValue(event.target.value);
    console.log(outputValue);
  }

  return (
    <rapid-number-field onChange={onChange}></rapid-number-field>
  );
}

Angular

Declaration

<rapid-number-field></rapid-number-field>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'my-root',
  template: `
    <rapid-number-field
      (change)="onChange($event)"
    ></rapid-number-field>
  `,
  styleUrls: ['./my.component.css'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [FormsModule],
})
export class AppComponent {
  onChange(event: Event) {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  }
}

API

Property and attribute binding examples for Genesis Component syntax.

Attributes

Name	Type	Description	Example
autofocus	boolean	When true, the component will be focused when the page has finished loading	<rapid-number-field ?autofocus="${(x) => x.autoFocus}">
appearance	string	Can be outline or filled	<rapid-number-field appearance="outline">
autoStepPrecision	boolean	When true, automatically calculates the step value based on the decimal precision of the current value. For example, a value of 100.5 will use a step of 0.1, while 100.25 will use 0.01. This ensures that step operations maintain the same decimal precision as the input value.	<rapid-number-field autoStepPrecision>
disabled	boolean	Similar to readonly, but with a blur on the component	<rapid-number-field ?disabled="${(x) => x.isDisabled}">
locale	string	Defines a number format based on language and location. Default: "en-US". Must be used with withFormatting	<rapid-number-field withFormatting locale="en-GB">
form	string	Associates this component with a form. Form id needs to be passed. If no Id is provided, then it will be associated with the ancestor form	<rapid-number-field form="myForm">
hideStep	boolean	Hides the step control (up and down arrows) for the element	<rapid-number-field hideStep>
maxlength	number	The maximum number of characters allowed	<rapid-number-field maxlength="${(x) => x.maxLength}">
minlength	number	The minimum number of characters allowed	<rapid-number-field minlength="${(x) => x.minLength}">
max	number	Defines the maximum value allowed	<rapid-number-field max="${(x) => x.max}">
maximumInputPrecision	number	Defines the maximum number of significant digits allowed in the input. Default: 12. This helps prevent precision loss when working with very large or very precise numbers.	<rapid-number-field maximumInputPrecision="${(x) => x.maxPrecision}">
min	number	Defines the minimum value allowed	<rapid-number-field min="${(x) => x.min}">
withFormatting	boolean	Enables you to format the number	<rapid-number-field withFormatting>
name	string	Defines the name of the element	<rapid-number-field name="username">
placeholder	string	Sets placeholder text for the element (which disappears when the user starts typing)	<rapid-number-field placeholder="Enter your name">
readonly	boolean	If true, the user cannot change the value of this field	<rapid-number-field ?readonly="${(x) => x.isReadonly}">
size	number	Sets the width of the component	<rapid-number-field size="${(x) => x.fieldSize}">
step	number	Defines the amount the field value changes each time the user clicks to increase or decrease the field value. If autoStepPrecision is enabled, this value is ignored and the step is automatically calculated based on the decimal precision of the current value.	<rapid-number-field type="number" step="${(x) => x.stepValue}">
value	string	Sets the value for this component. Use the sync utility to bind the data the template back to the model.	<rapid-number-field value="${sync((x) => x.fieldValue, 'number')}">

Properties

Name	Type	Description	Example
options	json	The options to be used when withFormatting is true, e.g. , use maximumFractionDigits to set the number of decimal places.	<rapid-number-field withFormatting :options=${() => ({maximumFractionDigits: 2})}>

Slots

Slot	Use
start	Start slot.
end	End slot.
step-up-glyph	The glyph for the step up control.
step-down-glyph	The glyph for the step down control.

Parts

Part	Use
label	The label.
start	Before the input.
controls	The step up and step down controls.
end	After the input.
root	The element wrapping the control, including start and end slots.
control	The element representing the input.
step-up	The step up control.
step-down	The step down control.

Events fired

Name	Type	Description	Example
@input	void	Fires a custom 'input' event when the value is changed via step-up and step-down functionality, and also on blur.	<rapid-number-field @input="${(x) => x.inputHandler()}">
@change	void	Fires a custom 'change' event when the value has changed.	<rapid-number-field @change="${(x) => x.changeHandler()}">

Events listened to

This component doesn't listen to any events.

Further details

This component is an implementation of an HTML text-field element.