> 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/dropdown/code/subcomponents.md).

# SubComponents

### Header, Actions and Divider.

This subcomponents are extended from the Menu. This subcomponents docs can be found in the [Menu subcomponents page. ](/sds/sds-3.0/sds-components/components/menu/code/subcomponents.md)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](/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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/dropdown/code/subcomponents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.