# ef-number-field

Form control element for numbers.

## Properties

| Property                   | Attribute     | Type             | Default | Description                                      |
|----------------------------|---------------|------------------|---------|--------------------------------------------------|
| `clears`                   | `clears`      | `boolean`        | false   | Show clears button                               |
| `disabled`                 | `disabled`    | `boolean`        | false   | Set disabled state                               |
| `error`                    | `error`       | `boolean`        | false   | Set error state                                  |
| `max`                      | `max`         | `string \| null` | null    | Set maximum value.<br />This value must be greater than or equal to the value of the `min` attribute |
| `min`                      | `min`         | `string \| null` | null    | Set minimum value.<br />This value must be less than or equal to the value of the `max` attribute |
| `noSpinner`                | `no-spinner`  | `boolean`        | false   | Set spinner's visibility                         |
| `placeholder`              | `placeholder` | `string`         | ""      | Set placeholder text                             |
| `readonly`                 | `readonly`    | `boolean`        | false   | Set readonly state                               |
| `step`                     | `step`        | `string \| null` | null    | Set step value                                   |
| `transparent`              | `transparent` | `boolean`        | false   | Disables all other states and border/background styles. |
| `value`                    | `value`       | `string`         | ""      | The value of the number entered into the input.  |
| `valueAsNumber (readonly)` |               | `number`         |         | Returns the value of the element, interpreted as double number |
| `warning`                  | `warning`     | `boolean`        | false   | Set warning state                                |

## Methods

| Method           | Type                                          | Description                                      |
|------------------|-----------------------------------------------|--------------------------------------------------|
| `checkValidity`  | `(): boolean`                                 | Returns `true` if the element input is valid; otherwise, returns `false`. |
| `reportValidity` | `(): boolean`                                 | Validate the element input and mark it as error if its input is invalid. |
| `stepDown`       | `(stepIncrement?: number \| undefined): void` | Decreases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |
| `stepUp`         | `(stepIncrement?: number \| undefined): void` | Increases the input value by amount of step<br /><br />**stepIncrement**: The stepIncrement parameter is a numeric value. If no parameter is passed, stepIncrement defaults to 1. |

## Events

| Event           | Description                                      |
|-----------------|--------------------------------------------------|
| `error-changed` | Fired when user inputs invalid value. The event is not triggered if `error` property is changed programmatically. |
| `step-down`     | Fired when user acts value down on both pressing arrow down or tapping the spinner down. The event is not triggered if stepDown method is called programmatically. |
| `step-up`       | Fired when user acts value up on both pressing arrow up or tapping the spinner up. The event is not triggered if stepUp method is called programmatically. |
| `value-changed` | Fired when user commits a value change. The event is not triggered if `value` property is changed programmatically. |