Number Input

Number Input widgets are Input Fields that allow the user to enter numeric values. They can include built-in controls (plus/minus buttons) for incrementing and decrementing the number.

number.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.numberInput('height', {
    label: 'Phone Number',
  }),
];

number.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "number",
      "path": "height",
      "label": "Phone Number"
    }
  ]
}

Props

Use these props to customize your Number Input widget.

prop	type	description
autocomplete	string	'on', 'off', or a space-separated list of W3C autofill tokens
autoGrow	boolean	If true, the input width expands according to the number of digits
hint	string	A description to display below the input
maximum	number	The maximum allowed value
minimum	number	The minimum allowed value
placeholder	string	A placeholder text to display when the input has no value
step	number	The increment or decrement step size when using the plus/minus buttons or arrow keys

Placeholder

Use the property placeholder to add a placeholder.

number.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.numberInput('height', {
    placeholder: '1.75',
    label: 'Height in meters',
  }),
];

number.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "number",
      "path": "height",
      "label": "Height in meters",
      "props": {
        "placeholder": "1.75"
      }
    }
  ]
}

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

number.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.numberInput('number', {
    hint: 'This is a hint',
    placeholder: '555 0100',
    label: 'Phone Number',
  }),
];

number.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "number",
      "path": "number",
      "label": "Phone Number",
      "props": {
        "hint": "This is a hint",
        "placeholder": "555 0100"
      }
    }
  ]
}

Step

Use the property step to define the amount by which the value increases or decreases when interacting with the controls.

number.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.numberInput('height', {
    step: 0.01,
    label: 'Height in meters',
  }),
];

number.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "number",
      "path": "height",
      "label": "Height in meters",
      "props": {
        "step": 0.01
      }
    }
  ]
}

Min & Max

Use the minimum and maximum properties to constrain the accepted range. The plus/minus buttons will be disabled if the limit is reached.

number.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.numberInput('height', {
    placeholder: '0 to 2.5',
    minimum: 0,
    maximum: 2.5,
    label: 'Height in meters',
    validator: {
      minimum: 0,
      maximum: 2.5,
    },
  }),
];

number.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "number",
      "path": "height",
      "label": "Height in meters",
      "props": {
        "placeholder": "0 to 2.5",
        "minimum": 0,
        "maximum": 2.5
      },
      "validator": {
        "type": "number",
        "minimum": 0,
        "maximum": 2.5
      }
    }
  ]
}

Auto Grow

Use the property autoGrow to allow the input’s width to change dynamically based on its content value.

number.ts

import { gui } from '@golemui/gui-shared';

export default [
  gui.inputs.numberInput('amount', {
    autoGrow: true,
    label: 'Amount',
  }),
];

number.json

{
  "$schema": "https://golemui.com/schemas/form.schema.json",
  "form": [
    {
      "kind": "input",
      "type": "number",
      "path": "amount",
      "label": "Amount",
      "props": {
        "autoGrow": true
      }
    }
  ]
}

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-radius-md	Overall widget border radius
--gui-border-default	Default border color
--gui-text-default	Default text and focus border color
--gui-intent-error	Border color when invalid
--gui-space-gap--inner	Label gap and margin bottom

Anatomy

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

number-anatomy.html

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

  <div class="gui-widget">
    <input
      type="number"
      inputmode="decimal"
      id="fieldUid"
      placeholder="Custom placeholder"
      aria-required="true"
      aria-describedby="fieldUid_hint"
    />

    <span
      class="gui-number__decoration"
    >
      <span class="gui-caret gui-caret--up" aria-hidden="true"></span>
      <span class="gui-caret" aria-hidden="true"></span>
    </span>
  </div>
</gui-number>