# 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)`[type='file']`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` 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 %}

<table><thead><tr><th width="238">Props</th><th width="355.3333333333333">Type</th><th>Required</th></tr></thead><tbody><tr><td><code>files</code></td><td><code>SDSFile[]</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>defaultFileNames</code></td><td><code>SDSFile[]</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>regionDescription</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>actionText</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>isDisabled</code></td><td><code>boolean</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>hasError</code></td><td><code>boolean</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>warningMessages</code></td><td><p><code>{</code> </p><p><code>fileSize?: ReactNode; invalidFile?: ReactNode;</code> </p><p><code>}</code></p></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>fileSizeConfig</code></td><td><p><code>{</code></p><p><code>fileSizeLimit?: number; fileSizeUnit?: 'Byte' | 'KB' | 'MB' | 'GB';</code></p><p><code>}</code></p></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>acceptedFiles</code></td><td><code>'All' | 'Images' | 'Audio' | 'Video' | string;</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>onFileRemove</code></td><td><code>(fileId: string) => void;</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>onChange</code></td><td><code>(e: FileUploadRegionOnChangeProps) => void;</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

<details>

<summary>files</summary>

This controls the `FileUploadRegion` files when using a controlled approach.

</details>

<details>

<summary>defaultFileNames</summary>

This controls the `FileUploadRegion`files when using a uncontrolled approach when the component is first rendered.

</details>

{% code title="SDSFile Interface" %}
```tsx
  fileName: string;
  fileSize: string;
  fileURL?: string;
  fileId: string;
  fileExtension?: string;
```
{% endcode %}

<details>

<summary>regionDescription and actionText</summary>

String passed to render a description and to change the underlined text.

</details>

<details>

<summary>warningMessages</summary>

An object that receives the warning messages that will be shown when an `invalidFile` or and `invalidSize` of a file/files is passed.

</details>

<details>

<summary>fileSizeConfig</summary>

An object to set the `fileSizeConfiguration`, where you can pass the unit (MB,GB, etc) and the the `fileSizeLimit`, for example if you pass a `fileSizeUnit` of 'MB' and a fileSizeLimit of a 100, then the fileSizeMax is set to 100MB.

</details>

<details>

<summary>acceptedFiles</summary>

Similar to the standard HTML file input element `(input[type='file'])`, our `FileUploadRegion` component allows you to specify a list of file extensions separated by commas.&#x20;

</details>

<details>

<summary>onFileRemove</summary>

When using a controlled approach, to control what happens when the 'x' button on each file is clicked.

</details>

<details>

<summary>onChange</summary>

Used when having a controlled approach, when the files state changes.

</details>

### HelpText

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

### Label

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