# SubComponents

### Item

This component extends the native [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. This is the parent component of the Description/NestedContent subcomponents.

### Item API

| Props         | Type                                                        | Required |
| ------------- | ----------------------------------------------------------- | -------- |
| `children`    | `ReactNode`                                                 | ✅        |
| `hasError`    | `boolean`                                                   | ❌        |
| `isDisabled`  | `boolean`                                                   | ❌        |
| `value`       | `string`                                                    | ❌        |
| `icon`        | [`AvailableTelicon`](https://2600hz.github.io/sds-telicon/) | ❌        |
| `image`       | `string`                                                    | ❌        |
| `imageLayout` | `'left' \| 'top'`                                           | ❌        |
| `controlType` | `'checkbox' \| 'radio'`                                     | ❌        |
| `hideControl` | `boolean`                                                   | ❌        |
| `onCheck`     | `(e: ChangeEvent) => void`                                  | ❌        |

<details>

<summary>children</summary>

The Description/NestedContent subcomponents.

</details>

<details>

<summary>hasError</summary>

Control the error state for each item.

</details>

<details>

<summary>isDisabled</summary>

Control the disabled state for each item.

</details>

<details>

<summary>value</summary>

To pass a controlled value.

</details>

<details>

<summary>icon</summary>

To pass a custom icon.

</details>

<details>

<summary>image</summary>

String passed to render an image.

</details>

<details>

<summary>imageLayout</summary>

The image presentation mode.

</details>

<details>

<summary>controlType</summary>

To choose the control each item has.

</details>

<details>

<summary>hideControl</summary>

To show/hide the control.

</details>

<details>

<summary>onCheck</summary>

Executed when checked.

</details>

### Description

The description subcomponent controls the structure rendered inside. This component extends the native [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API.

### Description API

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

An string/structure to describe the item.

</details>

### NestedContent

The subcomponent can be used to render actions or extra actions below the content.

### NestedContent API

The content subcomponent controls the structure rendered below, when checked, almost like an accordion.

| Props      | Type        | Required |
| ---------- | ----------- | -------- |
| `children` | `ReactNode` | ✅        |

<details>

<summary>children</summary>

An string/structure rendered when the item is checked/active.

</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)
