Interface DropdownProps

Props for the Dropdown component.

interface DropdownProps {
    backgroundColor?:
        | "primary"
        | "blue5"
        | "white"
        | "textFaded"
        | "navigation"
        | "navigationTop"
        | "navigationSide"
        | "background"
        | "drawer"
        | "cards"
        | "cardDivider"
        | "cardSectionSeparator"
        | "fieldsOnCard"
        | "fieldsFloating"
        | "buttonSecondary"
        | "iconsDisabled"
        | "red"
        | "orange"
        | "greenDark"
        | "greenLight"
        | "text"
        | "redDark"
        | "orangeDark"
        | "greenDark2"
        | "blueDark"
        | "lineColor"
        | "iconButtonBg";
    hideDropdownIcon?: boolean;
    iconLabelOnly?: boolean;
    label: string;
    maxWidth?: number;
    onChange: (value: string) => void;
    options: { label: ReactNode; prependIcon?: ReactNode; value: string }[];
    overrideColor?: string;
    overrideLabel?: ReactNode;
    value: string;
}

Hierarchy

  • Omit<SelectProps, "value" | "onChange">
    • DropdownProps

Properties

backgroundColor? hideDropdownIcon? iconLabelOnly? label maxWidth? onChange options overrideColor? overrideLabel? value

Properties

OptionalbackgroundColor

backgroundColor?:
    | "primary"
    | "blue5"
    | "white"
    | "textFaded"
    | "navigation"
    | "navigationTop"
    | "navigationSide"
    | "background"
    | "drawer"
    | "cards"
    | "cardDivider"
    | "cardSectionSeparator"
    | "fieldsOnCard"
    | "fieldsFloating"
    | "buttonSecondary"
    | "iconsDisabled"
    | "red"
    | "orange"
    | "greenDark"
    | "greenLight"
    | "text"
    | "redDark"
    | "orangeDark"
    | "greenDark2"
    | "blueDark"
    | "lineColor"
    | "iconButtonBg"

backfround color

Default

'transparent'

OptionalhideDropdownIcon

hideDropdownIcon?: boolean

Hide the dropdown icon. If set to true, the dropdown icon will not be displayed.

Default

false

OptionaliconLabelOnly

iconLabelOnly?: boolean

Show icon only in dropdown label This is useful when you want to display only the icon without any text.

Default

false

label

label: string

The label displayed above the dropdown.

OptionalmaxWidth

maxWidth?: number

Max width of the dropdown.

Default

413

onChange

onChange: (value: string) => void

Function to call when selection changes.

options

options: { label: ReactNode; prependIcon?: ReactNode; value: string }[]

The list of options to display in the dropdown. The label can now be a string or a custom JSX element.

OptionaloverrideColor

overrideColor?: string

Optional override color for the text.

OptionaloverrideLabel

overrideLabel?: ReactNode

Show icon only in dropdown label This is useful when you want to display only the icon without any text.

Default

<DropdownIcon />

value

value: string

The selected value.

Settings

Member Visibility

On This Page

Properties