Numeric stepper

Code

A numeric variant of certara-input with magnitude-aware (“log”) stepping and a certaraStep event that fires when the value changes via a stepping gesture. It shares certara-input’s markup, form participation and validation through the common InputController, implementing only the numeric-specific behavior hooks.

Framework

HTML

React

Angular

Fixed step

Toggle dark mode

<certara-input-numeric step="10" value="50" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric step={10} value={50} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric step="10" value="50"></certara-input-numeric>

Magnitude (log) step

Toggle dark mode

<certara-input-numeric step-type="log" require-valid-step="false" value="240" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric stepType="log" requireValidStep={false} value={240} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric step-type="log" require-valid-step="false" value="240"></certara-input-numeric>

Whole-number log step

Toggle dark mode

<certara-input-numeric step-type="log" step-integer require-valid-step="false" value="24" min="0" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric stepType="log" stepInteger requireValidStep={false} value={24} min={0} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric step-type="log" step-integer require-valid-step="false" value="24" min="0"></certara-input-numeric>

Stepper buttons

Set variant="complex" to show built-in − / + stepper buttons.

Framework

HTML

React

Angular

Fixed step

Toggle dark mode

<certara-input-numeric variant="complex" step="10" value="50" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric variant="complex" step={10} value={50} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric variant="complex" step="10" value="50"></certara-input-numeric>

Magnitude (log) step

Toggle dark mode

<certara-input-numeric variant="complex" step-type="log" require-valid-step="false" value="240" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric variant="complex" stepType="log" requireValidStep={false} value={240} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric variant="complex" step-type="log" require-valid-step="false" value="240"></certara-input-numeric>

With label and help text

Framework

HTML

React

Angular

Steps by orders of magnitude

Toggle dark mode

<certara-form-group label="Amount" layout="stacked">
  <span slot="help">Steps by orders of magnitude</span>
  <certara-input-numeric step-type="log" require-valid-step="false" value="240">
  </certara-input-numeric>
</certara-form-group>

import { CertaraFormGroup, CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraFormGroup label="Amount" layout="stacked">
  <span slot="help">Steps by orders of magnitude</span>
  <CertaraInputNumeric stepType="log" requireValidStep={false} value={240}>
  </CertaraInputNumeric>
</CertaraFormGroup>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-form-group label="Amount" layout="stacked">
  <span slot="help">Steps by orders of magnitude</span>
  <certara-input-numeric step-type="log" require-valid-step="false" value="240">
  </certara-input-numeric>
</certara-form-group>

Sizes

Framework

HTML

React

Angular

Medium

Toggle dark mode

<certara-input-numeric step="10" value="50" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric step={10} value={50} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric step="10" value="50"></certara-input-numeric>

Small

Toggle dark mode

<certara-input-numeric size="sm" step="10" value="50" />

import { CertaraInputNumeric } from '@certara/certara-ui-react';

<CertaraInputNumeric size="sm" step={10} value={50} />

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-input-numeric size="sm" step="10" value="50"></certara-input-numeric>

certara-input-numeric

Properties

accept

Attribute	accept
Type	string
Default	undefined
Required	false
Description	Accepted file types. Present for parity with certara-input; not typically used for numeric inputs.

disabled

Attribute	disabled
Type	boolean
Default	false
Required	false
Description	Prevents user interaction.

max

Attribute	max
Type	number | string
Default	undefined
Required	false
Description	Maximum value for the input.

maxlength

Attribute	maxlength
Type	number
Default	undefined
Required	false
Description	Maximum number of characters allowed.

min

Attribute	min
Type	number | string
Default	undefined
Required	false
Description	Minimum value for the input.

minlength

Attribute	minlength
Type	number
Default	undefined
Required	false
Description	Minimum number of characters required.

name

Attribute	name
Type	string
Default	this.inputId
Required	false
Description	Form control name, used for form submission and validation events.

pattern

Attribute	pattern
Type	string
Default	undefined
Required	false
Description	Regex pattern the value must match.

placeholder

Attribute	placeholder
Type	string
Default	undefined
Required	false
Description	Placeholder text shown when empty.

readonly

Attribute	readonly
Type	boolean
Default	false
Required	false
Description	Prevents editing while allowing selection and copy.

requireValidStep

Attribute	require-valid-step
Type	boolean
Default	true
Required	false
Description	When false, a step mismatch is not reported as a validation error (all other validation still applies). Useful with stepType="log", where typed values need not align to a single fixed step.

required

Attribute	required
Type	boolean
Default	false
Required	false
Description	Marks the field as required for form validation.

size

Attribute	size
Type	"md" | "sm"
Default	'md'
Required	false
Description	Visual size variant of the input.

step

Attribute	step
Type	number | string
Default	undefined
Required	false
Description	Step increment for the input.

stepFallbackBase

Attribute	step-fallback-base
Type	number
Default	undefined
Required	false
Description	Sizes the stepType="log" step when the current value has no usable magnitude — empty, zero, or not a number (log 0 is undefined).

stepInteger

Attribute	step-integer
Type	boolean
Default	false
Required	false
Description	Keeps stepType="log" step increments whole (the step size never drops below 1), for whole-number fields such as counts. This bounds the step size, not the value — use min/max to bound the value.

stepType

Attribute	step-type
Type	"default" | "log"
Default	'default'
Required	false
Description	Step sizing mode. ‘default’ uses the fixed step increment; ‘log’ sizes the step to the current value’s order of magnitude (24 → 1, 240 → 10, 0.24 → 0.01), so stepping always lands on round numbers.

value

Attribute	value
Type	string
Default	undefined
Required	false
Description	Current value of the input.

variant

Attribute	variant
Type	"complex" | "simple"
Default	'simple'
Required	false
Description	Layout variant. simple (default) exposes open-ended prepend/append slots. complex replaces those slots with built-in − / + stepper buttons that drive the native incrementer, matching a spinbutton UI.

Events

Name	Description	Bubbles
certaraBlur	Emitted when the input loses focus.	true
certaraChange	Emitted when value changes from the previous value.	true
certaraFocus	Emitted when the input gains focus.	true
certaraFormControlError	Emitted when validation state changes. Payload is the error message or empty string when valid.	true
certaraInput	Emitted on every keystroke.	true
certaraStep	Emitted when the value changes via a stepping gesture — arrow keys, the native spinner, or the mouse wheel — rather than typing. Payload is the new value.	true

Methods

Name	Signature	Description
setBlur	() => Promise<void>	Programmatically blurs the input.
setError	(error: string) => Promise<void>	Sets a custom error message. This allows consumers to call input.setError('my error message') instead of input.setAttribute('error', 'my error message').
setFocus	() => Promise<void>	Programmatically focuses the input.

Slots

Name	Description
append	(simple variant only) Content placed after the input (e.g., buttons, icons).
prepend	(simple variant only) Content placed before the input (e.g., labels, icons).