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.

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

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

{
  "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.

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)',
      },
    },
  ],
});

{
  "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

Use the property hint to add a description.

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',
      },
    },
  ],
});

{
  "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.

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',
      },
    },
  ],
});

{
  "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.

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,
      },
    },
  ],
});

{
  "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.

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,
      },
    },
  ],
});

{
  "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.

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

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

{
  "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.

<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>