Number

npm2.0.0

The number input component is used to allow users to input numeric values with optional min, max, and step constraints.

Example

Basic number input with field label, placeholder, and help text

quantity

enter a numeric value

code

<script type="module">
  import '@blueprintui/components/include/number.js';
</script>

<bp-field>
  <label>quantity</label>
  <bp-number placeholder="enter number"></bp-number>
  <bp-field-message>enter a numeric value</bp-field-message>
</bp-field>

Prefix Suffix

Demonstrates prefix and suffix slots for currency symbols, measurement units, and percentage indicators

price

enter price in dollars

weight

lbs

enter weight in pounds

temperature

°F

enter temperature in fahrenheit

discount

enter discount percentage

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>price</label>
    <bp-number value="99.99" step="0.01">
      <span slot="prefix">$</span>
    </bp-number>
    <bp-field-message>enter price in dollars</bp-field-message>
  </bp-field>

  <bp-field>
    <label>weight</label>
    <bp-number value="150">
      <span slot="suffix">lbs</span>
    </bp-number>
    <bp-field-message>enter weight in pounds</bp-field-message>
  </bp-field>

  <bp-field>
    <label>temperature</label>
    <bp-number value="72">
      <span slot="suffix">°F</span>
    </bp-number>
    <bp-field-message>enter temperature in fahrenheit</bp-field-message>
  </bp-field>

  <bp-field>
    <label>discount</label>
    <bp-number value="15" min="0" max="100">
      <span slot="suffix">%</span>
    </bp-number>
    <bp-field-message>enter discount percentage</bp-field-message>
  </bp-field>
</bp-form-group>

Validation

Form validation with required fields, min/max range constraints, and step increment validation with custom error messages

age

age is required

must be at least 18

must be less than 120

rating

minimum rating is 1

maximum rating is 5

must be in increments of 0.5

quantity

quantity is required

cannot be negative

maximum quantity is 999

code

<bp-form-group layout="vertical">
  <bp-field validate>
    <label>age</label>
    <bp-number min="18" max="120" required></bp-number>
    <bp-field-message error="valueMissing">age is required</bp-field-message>
    <bp-field-message error="rangeUnderflow">must be at least 18</bp-field-message>
    <bp-field-message error="rangeOverflow">must be less than 120</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>rating</label>
    <bp-number min="1" max="5" step="0.5" value="3.5"></bp-number>
    <bp-field-message error="rangeUnderflow">minimum rating is 1</bp-field-message>
    <bp-field-message error="rangeOverflow">maximum rating is 5</bp-field-message>
    <bp-field-message error="stepMismatch">must be in increments of 0.5</bp-field-message>
  </bp-field>

  <bp-field validate>
    <label>quantity</label>
    <bp-number min="0" max="999" required></bp-number>
    <bp-field-message error="valueMissing">quantity is required</bp-field-message>
    <bp-field-message error="rangeUnderflow">cannot be negative</bp-field-message>
    <bp-field-message error="rangeOverflow">maximum quantity is 999</bp-field-message>
  </bp-field>
</bp-form-group>

Vertical

Vertical field layout showing default, disabled, error, and success states

quantity

message text

disabled

disabled message

error

value exceeds maximum

success

value is valid

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>quantity</label>
    <bp-number placeholder="0" value="10"></bp-number>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field>
    <label>disabled</label>
    <bp-number placeholder="0" value="5" disabled></bp-number>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field status="error">
    <label>error</label>
    <bp-number placeholder="0" value="150"></bp-number>
    <bp-field-message status="error">value exceeds maximum</bp-field-message>
  </bp-field>

  <bp-field status="success">
    <label>success</label>
    <bp-number placeholder="0" value="50"></bp-number>
    <bp-field-message status="success">value is valid</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

Horizontal field layout with label positioned beside input, displaying various field states

quantity

message text

disabled

disabled message

error

value exceeds maximum

success

value is valid

code

<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>quantity</label>
    <bp-number placeholder="0" value="10"></bp-number>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-number placeholder="0" value="5" disabled></bp-number>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error</label>
    <bp-number placeholder="0" value="150"></bp-number>
    <bp-field-message status="error">value exceeds maximum</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success</label>
    <bp-number placeholder="0" value="50"></bp-number>
    <bp-field-message status="success">value is valid</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

Compact field layout with reduced spacing for space-constrained interfaces

quantity

message text

disabled

disabled message

error

value exceeds maximum

success

value is valid

code

<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label>quantity</label>
    <bp-number placeholder="0" value="10"></bp-number>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-number placeholder="0" value="5" disabled></bp-number>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error</label>
    <bp-number placeholder="0" value="150"></bp-number>
    <bp-field-message status="error">value exceeds maximum</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success</label>
    <bp-number placeholder="0" value="50"></bp-number>
    <bp-field-message status="success">value is valid</bp-field-message>
  </bp-field>
</bp-form-group>

Readonly

Read-only number field that displays a value without allowing user modification

readonly number

this value cannot be changed

code

<bp-field>
  <label>readonly number</label>
  <bp-number value="42" readonly></bp-number>
  <bp-field-message>this value cannot be changed</bp-field-message>
</bp-field>

Step

Demonstrates step increment controls for whole numbers, intervals, and decimal precision

step: 1 (default)

increments of 1

step: 5

increments of 5

step: 0.01 (decimals)

increments of 0.01

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>step: 1 (default)</label>
    <bp-number value="10" step="1" min="0" max="100"></bp-number>
    <bp-field-message>increments of 1</bp-field-message>
  </bp-field>

  <bp-field>
    <label>step: 5</label>
    <bp-number value="25" step="5" min="0" max="100"></bp-number>
    <bp-field-message>increments of 5</bp-field-message>
  </bp-field>

  <bp-field>
    <label>step: 0.01 (decimals)</label>
    <bp-number value="9.99" step="0.01" min="0">
      <span slot="prefix">$</span>
    </bp-number>
    <bp-field-message>increments of 0.01</bp-field-message>
  </bp-field>
</bp-form-group>

Range

Min/max range constraints with positive, negative, and mixed value ranges

positive range (0-100)

min: 0, max: 100

negative range (-100 to 0)

min: -100, max: 0

mixed range (-50 to 50)

min: -50, max: 50

code

<bp-form-group layout="vertical">
  <bp-field>
    <label>positive range (0-100)</label>
    <bp-number value="50" min="0" max="100"></bp-number>
    <bp-field-message>min: 0, max: 100</bp-field-message>
  </bp-field>

  <bp-field>
    <label>negative range (-100 to 0)</label>
    <bp-number value="-50" min="-100" max="0"></bp-number>
    <bp-field-message>min: -100, max: 0</bp-field-message>
  </bp-field>

  <bp-field>
    <label>mixed range (-50 to 50)</label>
    <bp-number value="0" min="-50" max="50"></bp-number>
    <bp-field-message>min: -50, max: 50</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/number.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/number.js/+esm';
</script>

Accessibility

The number input should have a clear and visible label.
It should have a clear and visible focus state and be keyboard navigable.
It should support ARIA attributes such as aria-describedby and aria-label if a visible label is not provided.
Validation messages should be announced to screen readers using aria-describedby.
When using prefix/suffix slots for units or currency symbols, ensure the information is available to screen readers.

bp-number

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description
`type`	`string`	Specifies the input type as number for numeric input behavior
`step`	`number`	number that specifies the granularity that the value must adhere to
`stepUp`		Increments the value by the step amount
`stepDown`		Decrements the value by the step amount
`value`	`string \| number \| FormData \| File`	Defines the current value of the input for form submission and validation
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`formNoValidate`	`boolean`	determines if the form control is novalidate
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters
`formAssociated`	`boolean`
`valueAsNumber`
`composedLabel`
`focus`
`reset`

Attributes

Name	Types	Description
`type`	`string`	Specifies the input type as number for numeric input behavior
`step`	`number`	number that specifies the granularity that the value must adhere to
`value`	`string \| number \| FormData \| File`	Defines the current value of the input for form submission and validation
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`formNoValidate`	`boolean`	determines if the form control is novalidate
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`size`	`number`	determines number of characters

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border`
`--border-radius`
`--outline`
`--outline-offset`
`--padding`
`--font-size`
`--line-height`
`--height`
`--min-width`
`--width`
`--transition`
`--text-align`
`--cursor`
`--background-size`

Slots

Name	Types	Description
`prefix`		slot for prefix text or icons (e.g., currency symbols)
`suffix`		slot for suffix text or icons (e.g., units)