> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/textarea/code/subcomponents.md).

# Subcomponents

This component has 3 subcomponents:

### Control

The control subcomponent is required to render the `Control` of the TextInput 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 |
| -------------- | ----------------------------------------------------- | -------- |
| `defaultValue` | `string \| number \| readonly string[] \| undefined;` | :x:      |
| `value`        | `string \| number \| readonly string[] \| undefined`  | :x:      |
| `hasError`     | `boolean`                                             | :x:      |
| `isDisabled`   | `boolean`                                             | :x:      |
| `isReadOnly`   | `boolean`                                             | :x:      |
| `maxLength`    | `number`                                              | :x:      |
| `customFilter` | `(value: string) => string;`                          | :x:      |
| `onChange`     | `(e: React.ChangeEvent<HTMTextAreaElement>) => void;` | :x:      |

<details>

<summary>defaultValue</summary>

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

</details>

<details>

<summary>value</summary>

Prop that control the value, used when using a controlled approach.

</details>

<details>

<summary>maxLength</summary>

Indicates a max length value to write in the input component. This does control the max length entirely.

</details>

<details>

<summary>customFilter</summary>

Function where developers can create their own filters

</details>

<details>

<summary>onChange</summary>

Specifies a function to be called when the field's value changes

</details>

### HelpText

The HelpText subcomponent extends the SDS HelpText component. See for reference: [HelpText](/sds/sds-3.0/sds-components/components/helptext.md)

### Label

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