---
description: 'This component has 3 subcomponents:'
---

# Subcomponents

### Control

The control subcomponent is required to render the `Control` of the NumberInput component. Because of this, this component extends the native [`input`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)component props.  Because of this, you can use all of the native props. This is a required children.

### Control API

{% hint style="danger" %}
Notice that there is a difference between using `hasError, isDisabled, isReadOnly` here or in the parent component. It is not recommended to change this props in the `Control` subcomponent, because this props can be inherited from the `Wrapper`. If you use it in the `Control` subcomponent, you will get the state only in the field.&#x20;
{% endhint %}

| Props                | Type                                                  | Required |
| -------------------- | ----------------------------------------------------- | -------- |
| `value`              | `string \| number \| readonly string[] \| undefined;` | :x:      |
| `defaultValue`       | `string \| number \| readonly string[] \| undefined;` | :x:      |
| `hasError`           | `boolean`                                             | :x:      |
| `isDisabled`         | `boolean`                                             | :x:      |
| `isReadOnly`         | `boolean`                                             | :x:      |
| `min`                | `number`                                              | :x:      |
| `max`                | `number`                                              | :x:      |
| `maxLength`          | `number`                                              | :x:      |
| `showButtons`        | `boolean`                                             | :x:      |
| `isWholeNumbersOnly` | `boolean`                                             | :x:      |
| `customFilter`       | `(value: string) => string;`                          | :x:      |
| `onChange`           | `(e: React.ChangeEvent<HTMLInputElement>) => void;`   | :x:      |

<details>

<summary>value</summary>

This controls the `NumberInput`value when using a controlled approach.

</details>

<details>

<summary>defaultValue</summary>

This sets a default value for the input when the DOM is rendered. Used when having an uncontrolled approach.

</details>

<details>

<summary>min</summary>

Property that defines the minimum suggested value that the input should receive

</details>

<details>

<summary>max</summary>

Property that defines the maximum suggested value that the input should receive

</details>

<details>

<summary>maxLength</summary>

Property that defines the maximum length of characters the input field can receive. Notice the difference between the max and maxLength is esentially that `max` is just a visual representation of the maximum.

</details>

<details>

<summary>showButtons</summary>

Property in charge of showing or hiding the complementary input buttons

</details>

<details>

<summary>isWholeNumbersOnly</summary>

Filter that returns only whole numbers, removing other characters or symbols

</details>

<details>

<summary>customFilter</summary>

Function where developers can create their own filters

</details>

### HelpText

The HelpText subcomponent extends the SDS HelpText component. See for reference: [HelpText](../../helptext)

### Label

The Label subcomponent extends the SDS label component. See for reference: [Label](broken-reference)
