Dropdown container

Last updated: 2.0.0 (18/01/2024)

This is a foundational component and is not designed to be used by itself. Only use this if you intend to make your own inputs.

The Dropdown container is used to create dropdowns, and handles most of the styling and dropdown logic for the Select input.

Under the hood, this component is a wrapper around the Input container, with additional components provided by Floating UI to create the dropdown itself.

Usage

import { DropdownContainer } from "@valence-ui/core";

function MyComponent() { 

    return ( 
        <DropdownContainer 
            options={["hello", "world"]}        
            // For brevity, most suggested props
            // are not included.
        >
            // Your sub-component here.
            // It should have little to no styling,
            // as this is passed to the InputContainer.
        </DropdownContainer>
    )
}

If no children are supplied, a Text component rendering the selected option or a placeholder will be shown instead.

Props

Extends InputContainerProps and DropdownContainerEventProps.

Property

Type

Description

options (required)

Option[]

A list of options to display.

placeholder

string

The placeholder text to display when no option is selected.

selected

number | null

The currently selected option.

setSelected

(option: number | null) => void

A callback to set the selected option.

highlighted

number | null

The currently highlighted option.

setHighlighted

(option: number | null) => void

A callback to set the highlighted option.

icon

ReactNode

An icon to display in the input container.

secondaryIcon

ReactNode

A secondary icon to display in the input container.

dropdownStyle

CSSProperties

Optional styles to pass to the dropdown.