SubComponents

Header, Actions and Divider.

This subcomponents are extended from the Menu. This subcomponents docs can be found in the Menu subcomponents page. 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 tag props.

Control API

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.

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	❌

children

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

placeholder

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

defaultValue

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

value

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

showModeOption

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.

menuWidth

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

Option

The Option Subcomponent receives a children that renders content that when clicked, closes the Menu automatically.

Option API

This component extends the native <div> 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;	❌

value

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

layout

Controls the layout of the option.

children

A string or a HTML structure passed that is rendered

customValue

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

isDisabled, isSelected, isHidden

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

onClick

Function that can be executed when the Option is clicked.

HelpText

The HelpText subcomponent extends the SDS HelpText component. See for reference: HelpText

Label

The Label subcomponent extends the SDS label component. See for reference: Label