# SubComponents

### Header, Actions and Divider.

This subcomponents are extended from the Menu. This subcomponents docs can be found in the [Menu subcomponents page. ](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/menu/code/subcomponents)They work in the same way they are being used there.

### Control

The control subcomponent is required to render the `Control` of the TextInput component. This component extends the native [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes) tag props.  

### 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. 
{% endhint %}

| Props            | Type                                     | Required |
| ---------------- | ---------------------------------------- | -------- |
| `children`       | ReactNode                                | ✅        |
| `placeholder`    | `string`                                 | ❌        |
| `defaultValue`   | `string`                                 | ❌        |
| `defaultOpen`    | `boolean`                                | ❌        |
| `value`          | `string`                                 | ❌        |
| `showModeOption` | `'value' \| 'children' \| 'customValue'` | ❌        |
| `hasError`       | `boolean`                                | ❌        |
| `isDisabled`     | `boolean`                                | ❌        |
| `isReadOnly`     | `boolean`                                | ❌        |
| `menuWidth`      | `string`                                 | ❌        |

<details>

<summary>children</summary>

The children of the `Control` subcomponent should always be the `Dropdown.Option` subcomponent.

</details>

<details>

<summary>placeholder</summary>

This will be rendered in the controlled approach, in the case the initial value is `undefined.`

</details>

<details>

<summary>defaultValue</summary>

Used to render a default value when using the uncontrolled approach.

</details>

<details>

<summary>value</summary>

Used when having a controlled approach to pass the rendered value.

</details>

<details>

<summary>showModeOption</summary>

This property determines how the content should be displayed for each option within the Dropdown component. By default, the `'value'` option is utilized, simply rendering the value of the prop. However, if you opt for the `'children'`option, it will render the children contained within each option. Alternatively, if you select the `'customOption'` choice, it will render the customOption value of each individual `Dropdown.Option.`

</details>

<details>

<summary>menuWidth</summary>

Prop to change the menu width, changing the dropdown and content width.

</details>

### Option

The Option Subcomponent receives a children that renders content that when clicked, closes the `Menu` automatically.&#x20;

### Option API

This component extends the native [\<div>](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) API. That's why the `className` prop is not included in the table.

| Props         | Type                         | Required |
| ------------- | ---------------------------- | -------- |
| `value`       | `string`                     | ✅        |
| `layout`      | `'horizontal' \| 'vertical'` | ❌        |
| `children`    | `ReactNode`                  | ❌        |
| `customValue` | `ReactNode`                  | ❌        |
| `isDisabled`  | `boolean`                    | ❌        |
| `isSelected`  | `boolean`                    | ❌        |
| `isHidden`    | `boolean`                    | ❌        |
| `onClick`     | `(e: MouseEvent) => void;`   | ❌        |

<details>

<summary>value</summary>

A prop required to change the selected option, wether it's an uncontrolled approach or a controlled approach.

</details>

<details>

<summary>layout</summary>

Controls the layout of the option.

</details>

<details>

<summary>children</summary>

A string or a HTML structure passed that is rendered

</details>

<details>

<summary>customValue</summary>

A custom string or value or structure that will change the value of the `Dropdown` if the `showModeOption` chose this prop.

</details>

<details>

<summary>isDisabled, isSelected, isHidden</summary>

Changes the CSS to remark if it's disabled, selected or hidden.

</details>

<details>

<summary>onClick</summary>

Function that can be executed when the `Option` is clicked.

</details>

### HelpText

The HelpText subcomponent extends the SDS HelpText component. See for reference: [HelpText](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/helptext)

### Label

The Label subcomponent extends the SDS label component. See for reference: [Label](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/dropdown/code/broken-reference)