# certara-input-numeric ## Overview 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. ## Properties | Property | Attribute | Description | Type | Default | | ------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------- | | `accept` | `accept` | Accepted file types. Present for parity with certara-input; not typically used for numeric inputs. | `string` | `undefined` | | `disabled` | `disabled` | Prevents user interaction. | `boolean` | `false` | | `max` | `max` | Maximum value for the input. | `number \| string` | `undefined` | | `maxlength` | `maxlength` | Maximum number of characters allowed. | `number` | `undefined` | | `min` | `min` | Minimum value for the input. | `number \| string` | `undefined` | | `minlength` | `minlength` | Minimum number of characters required. | `number` | `undefined` | | `name` | `name` | Form control name, used for form submission and validation events. | `string` | `this.inputId` | | `pattern` | `pattern` | Regex pattern the value must match. | `string` | `undefined` | | `placeholder` | `placeholder` | Placeholder text shown when empty. | `string` | `undefined` | | `readonly` | `readonly` | Prevents editing while allowing selection and copy. | `boolean` | `false` | | `requireValidStep` | `require-valid-step` | 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. | `boolean` | `true` | | `required` | `required` | Marks the field as required for form validation. | `boolean` | `false` | | `size` | `size` | Visual size variant of the input. | `"md" \| "sm"` | `'md'` | | `step` | `step` | Step increment for the input. | `number \| string` | `undefined` | | `stepFallbackBase` | `step-fallback-base` | Sizes the `stepType="log"` step when the current value has no usable magnitude — empty, zero, or not a number (log 0 is undefined). | `number` | `undefined` | | `stepInteger` | `step-integer` | 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. | `boolean` | `false` | | `stepType` | `step-type` | 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. | `"default" \| "log"` | `'default'` | | `value` | `value` | Current value of the input. | `string` | `undefined` | | `variant` | `variant` | 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. | `"complex" \| "simple"` | `'simple'` | ## Events | Event | Description | Type | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | | `certaraBlur` | Emitted when the input loses focus. | `CustomEvent` | | `certaraChange` | Emitted when value changes from the previous value. | `CustomEvent` | | `certaraFocus` | Emitted when the input gains focus. | `CustomEvent` | | `certaraFormControlError` | Emitted when validation state changes. Payload is the error message or empty string when valid. | `CustomEvent` | | `certaraInput` | Emitted on every keystroke. | `CustomEvent` | | `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. | `CustomEvent` | ## Methods ### `setBlur() => Promise` Programmatically blurs the input. #### Returns Type: `Promise` ### `setError(error: string) => Promise` Sets a custom error message. This allows consumers to call `input.setError('my error message')` instead of `input.setAttribute('error', 'my error message')`. #### Parameters | Name | Type | Description | | ------- | -------- | ------------------------------------------------------- | | `error` | `string` | The error message to display, or empty string to clear. | #### Returns Type: `Promise` ### `setFocus() => Promise` Programmatically focuses the input. #### Returns Type: `Promise` ## Slots | Slot | 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). | ## Dependencies ### Depends on - [certara-button](../button) ### Graph ```mermaid graph TD; certara-input-numeric --> certara-button certara-button --> certara-icon style certara-input-numeric fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------