Number

Number components are Control Fields that allow the user to enter numeric values.

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "control",
      "widget": "number",
      "path": "height",
      "label": "Phone Number"
    }
  ]
}

Props

Use this props to customize your Number component.

prop	type	value
placeholder	string	A placeholder text to display when the input number has no value
hint	string	A description to display below the input number label
icon	string	A css class to display an icon
iconPosition	string	The icon position, possible values are right or left
step	number	Step value to jump on each keystroke using the arrow keys

Placeholder

Use the property placeholder to add a placeholder.

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "control",
      "widget": "number",
      "path": "height",
      "label": "Height in meters",
      "props": {
        "placeholder": "Please enter your height in meters (min 0 and max 2.5)"
      }
    }
  ]
}

Hint

Use the property hint to add a description.

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "control",
      "widget": "number",
      "path": "number",
      "label": "Phone Number",
      "props": {
        "hint": "This is a hint",
        "placeholder": "Please enter your phone number"
      }
    }
  ]
}

Icon

Use the property icon to add an icon to the number. The value of icon represents a set of CSS classes separated by spaces. The icon is displayed on the left by default, you can set the property iconPosition to right if you want the icon to be right aligned.

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "control",
      "widget": "number",
      "path": "number",
      "label": "Phone Number",
      "props": {
        "icon": "material-icons material-icons-phone_callback",
        "hint": "This is a hint",
        "placeholder": "Please enter your phone number"
      }
    },
    {
      "uid": "",
      "kind": "control",
      "widget": "number",
      "path": "number",
      "label": "Phone Number",
      "props": {
        "icon": "material-icons material-icons-phone_callback",
        "iconPosition": "right",
        "hint": "This is a hint",
        "placeholder": "Please enter your phone number"
      }
    }
  ]
}

Step

Use the properties step to set a jump value on each keystroke using the arrow keys. This number can be decimal.

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "control",
      "widget": "number",
      "path": "height",
      "label": "Height in meters",
      "props": {
        "step": 0.01
      }
    }
  ]
}

Styling

Number inputs can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-space-gap--inner	Label gap and margin bottom
--gui-padding	Input padding
--gui-color-border	Input border color
--gui-radius	Input radius
--gui-color-bg	Input background color
--gui-color-fg	Input text color
--gui-color-primary	Input border color and outline on focus
--gui-color-error	Input border color when invalid
--gui-space-gap	Icon left padding
--gui-icon-space-gap	Icon right padding
--gui-font-size--small	Hint font size
--gui-color-fg--secondary	Hint font color

Anatomy

This is the anatomy of the Number Component in case you want to use your CSS styles.

number.html

<gui-number>
  <label for="fieldUid">
    Label
    <div class="gui-number__hint" id="fieldUid_hint">Hint</div>
  </label>

  <div class="gui-field">
    <input
      type="text"
      inputmode="numeric"
      min="0"
      max="100"
      step="0.01"
      id="fieldUid"
      class="gui-number__icon gui-number__icon--right"
      disabled
      readonly
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    />
    <span class="gui-number__icon gui-number__icon--right"></span>
  </div>
</gui-number>