Skip to main content
Version: Current

Web Components - Number field

A text field for numeric entry. By default, this includes steps - up and down arrows where the user can click to increase or decrease the number in the field.


import { provideDesignSystem, alphaNumberField } from '@genesislcap/alpha-design-system';



You can define the following attributes when you declare an <alpha-number-field>.

appearancestringControls the general appearance of the element. It can be filled or outline
autofocusbooleanWhen true, the component will be in focus when the page has finished loading
disabledbooleanDisables this component; users will not be able to change its value
localestringDefines a number format based on language and location. Default: "en-US". Must be used with withFormatting
formstringAssociates 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
hideStepbooleanHides the step control (up and down arrows) for the element
maxnumberDefines the maximum value allowed
maxlengthnumberThe maximum number of characters allowed
minnumberDefines minimum value allowed
minlengthnumberThe minimum number of characters required
placeholderstringSets placeholder text for the element (which disappears when the user starts inputting)
sizenumberDefines the width of the component
stepnumberDefines the step rate for each user click on the arrows (steps) in the element. Default: 1
valuestringDefines a value for the component when it is created
withFormattingbooleanEnables you to format the number

Setting the number of decimal places

To set the number of decimal places, use the withFormatting attribute maximumFractionDigits.

maximumFractionDigitsnumber3Maximum number of decimal digits accepted (up to 11 digits)


All examples below use the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

  • Example 1: a number-field with maximum number 50 and minimum 10; the step control is hidden
Example 1
<alpha-number-field min="10" max="50" hidestep>number-field</alpha-number-field>
  • Example 2: a number-field with step 0.5 - each time the user clicks on a step arrow, the value increases or decreases by 0.5
Example 2
<alpha-number-field step="0.5">Number-field</alpha-number-field>
  • Example 3: a number-field with a maximum of 2 digits
Example 3
<alpha-number-field withFormatting :options=${() => ({maximumFractionDigits: 2})}>Number-field</alpha-number-field>

Get the user input

In order to use a value that has been input to this component, follow these two steps:

  1. Create an @observable variable where you want to use this value:
import {... , observable} from '@genesislcap/web-core';
export class TEMPLATE extends GenesisElement {
@observable number_field: number
  1. Use the sync function to insert the value from the component into the variable text_area:
import {sync} from '@genesislcap/foundation-utils';
<alpha-number-field value=${sync((x) => x.number_field)}>TEXT</alpha-number-field>

From this point, you can access the value of the component in your application.

Try yourself

Live Editor

Use cases

  • Display numbers
  • Insert numbers
  • Search boxes