# SubComponents

### Control

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

{% hint style="danger" %}
Notice that there is a difference between using `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 %}

| Props             | Type                             | Required |
| ----------------- | -------------------------------- | -------- |
| `defaultChecked`  | `boolean`                        | :x:      |
| `checked`         | `boolean`                        | :x:      |
| `isDisabled`      | `boolean`                        | :x:      |
| `isIndeterminate` | `boolean`                        | :x:      |
| `hasError`        | `boolean`                        | :x:      |
| `onChange`        | `(e: React.ChangeEvent) => void` | :x:      |

<details>

<summary>defaultChecked</summary>

This prop is used when using and uncontrolled approach of the component, passing a defaultValue to set the initial state.

</details>

<details>

<summary>checked</summary>

Prop that controls the checked state of the component.

</details>

<details>

<summary>isDisabled, isIndeterminate, hasError</summary>

`isDisabled` makes the checkbox have a disabled state, `isIndeterminate` makes the `Checkbox` partially checked and the`hasError` indicates an invalid value.

</details>

### Label

{% hint style="danger" %}
The label subcomponent **does not** extend the SDS label component. &#x20;
{% endhint %}

### Label API

This subcomponent extends the native label props.

| Props        | Type        | Required |
| ------------ | ----------- | -------- |
| `children`   | `ReactNode` |  ❌       |
| `isDisabled` | `boolean`   |  ❌       |
| `hasError`   | `boolean`   |  ❌       |
