Number Input

Number Input components 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.

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'height',
      label: 'Phone Number',
    },
  ],
});

JSON

number.json

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

Props

Use these props to customize your Number Input component.

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

Placeholder

Use the property placeholder to add a placeholder.

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'height',
      label: 'Height in meters',
      props: {
        placeholder: 'Please enter your height in meters (min 0 and max 2.5)',
      },
    },
  ],
});

JSON

number.json

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

Hint

Note

A label is required for the hint to be displayed.

Use the property hint to add a description.

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'number',
      label: 'Phone Number',
      props: {
        hint: 'This is a hint',
        placeholder: 'Please enter your phone number',
      },
    },
  ],
});

JSON

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "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 component. The value of icon represents a set of CSS classes separated by spaces.

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'number',
      label: 'Phone Number',
      props: {
        icon: 'phone_callback',
        hint: 'This is a hint',
        placeholder: 'Please enter your phone number',
      },
    },
    {
      kind: 'input',
      type: 'number',
      path: 'number',
      label: 'Phone Number',
      props: {
        icon: 'phone_callback',
        hint: 'This is a hint',
        placeholder: 'Please enter your phone number',
      },
    },
  ],
});

JSON

number.json

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

Step

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

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'height',
      label: 'Height in meters',
      props: {
        step: 0.01,
      },
    },
  ],
});

JSON

number.json

{
  "form": [
    {
      "uid": "",
      "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.

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'height',
      label: 'Height in meters',
      props: {
        placeholder: 'Please enter your height in meters (min 0 and max 2.5)',
        min: 0,
        max: 2.5,
      },
      validator: {
        type: 'number',
        minimum: 0,
        maximum: 2.5,
      },
    },
  ],
});

JSON

number.json

{
  "form": [
    {
      "uid": "",
      "kind": "input",
      "type": "number",
      "path": "height",
      "label": "Height in meters",
      "props": {
        "placeholder": "Please enter your height in meters (min 0 and max 2.5)",
        "min": 0,
        "max": 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.

Programmatic

number.ts

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

export default golemForm().create({
  form: [
    {
      kind: 'input',
      type: 'number',
      path: 'amount',
      label: 'Amount',
      props: {
        autoGrow: true,
      },
    },
  ],
});

JSON

number.json

{
  "form": [
    {
      "uid": "",
      "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 Component 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">
    <button
      type="button"
      tabindex="-1"
      class="gui-button gui-number__minus"
    >
      -
    </button>

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

    <button
      type="button"
      tabindex="-1"
      class="gui-button gui-number__plus"
    >
      +
    </button>
  </div>
</gui-number>