Skip to content
Enact

limestone/Dropdown

Edit on GitHub

Limestone styled Dropdown components

Loading Live Preview

Members

Section titled “Members ”
Section titled “Dropdown   Component ”

A Limestone Dropdown component.

By default, Dropdown maintains the state of its selected property. Supply the defaultSelected property to control its initial value. If you wish to directly control updates to the component, supply a value to selected at creation time and update it in response to onSelect events.

Extends: limestone/Dropdownlimestone/Dropdown.DropdownBase

Section titled “DropdownBase   Component ”

A stateless Dropdown component.

Extends: limestone/Buttonlimestone/Button.Button
Extends: limestone/ContextualPopupDecoratorlimestone/ContextualPopupDecorator.ContextualPopupDecorator

Properties
aria-label
Section titled “aria-label”
String

The "aria-label" for the Dropdown.

children
Section titled “children”
Array(String)Array(any)

Items to be displayed in the Dropdown when open.

Takes either an array of strings or an array of objects. When strings, the values will be used in the generated components as the readable text. When objects, the properties will be passed onto an Item component; children as well as a unique key properties are required.

direction
Section titled “direction”
'above''below'

Placement of the Dropdown.

Default: 'below'
disabled
Section titled “disabled”
Boolean

Disables Dropdown, making it non-interactive.

onClose
Section titled “onClose”
Function

Called when the Dropdown is closing.

onOpen
Section titled “onOpen”
Function

Called when the Dropdown is opening.

onSelect
Section titled “onSelect”
Function

Called when an item is selected.

The event payload will be an object with the following members:

  • data - The value for the option as received in the children prop

  • selected - Number representing the selected option, 0 indexed

open
Section titled “open”
Boolean

Displays the items.

Default: false
placeholder
Section titled “placeholder”
String

Text displayed in the Dropdown when nothing is selected.

The placeholder will be replaced by the selected item.

Default: 'No Selection'
selected
Section titled “selected”
Number

Index of the selected item.

size
Section titled “size”
'large''small'

The size of the Dropdown's limestone/Buttonlimestone/Button.Button component.

Default: 'large'
title
Section titled “title”
String

Primary title text of the Dropdown.

width
Section titled “width”
'huge''large''x-large''medium''small''tiny'number

Width of the Dropdown.

Default: 'large'
Section titled “DropdownDecorator   Higher-Order Component ”

Applies Limestone specific behaviors and functionality to limestone/Dropdownlimestone/Dropdown.DropdownBase.

Includes: ui/Changeableui/Changeable.Changeable
Includes: ui/Toggleableui/Toggleable.Toggleable
Includes: spotlight/SpotlightContainerDecoratorspotlight/SpotlightContainerDecorator.SpotlightContainerDecorator

Properties added to wrapped component
open
Section titled “open”
Boolean

Displays the items.

Default: false
selected
Section titled “selected”
Number

Index of the selected item.

defaultSelected
Section titled “defaultSelected”
Number

The initial selected index when selected is not defined.