Types

Dropdown

A dropdown.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Selection

A dropdown can be used to select between choices in a form.

Search Selection

A selection dropdown can allow a user to search through a large list of choices.

Multiple Selection

A selection dropdown can allow multiple selections.

Multiple Search Selection

A selection dropdown can allow multiple search selections.

Clearable2.4.0

Using the clearable setting will let users remove their selection from a dropdown..

Search Dropdown

A dropdown can be searchable.

Search In-Menu

A dropdown can include a search prompt inside its menu.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

A dropdown with multiple selections can include a search prompt inside its menu.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Inline

A dropdown can be formatted to appear inline in other content.

Pointing

A dropdown can be formatted so that its menu is pointing.

The example below shows (roughly) the desired markup but is not functional since we don't currently support nested dropdowns.

If there's no pull request open for this, you should contribute!

Floating

A dropdown menu can appear to be floating below an element.

Simple

A simple dropdown can open without Javascript.

Content

Header

A dropdown menu can contain a header.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Divider

A dropdown menu can contain dividers to separate related content.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Icon

A dropdown menu can contain an icon.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Description

A dropdown menu can contain a description.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Label

A dropdown menu can contain a label.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Message

A dropdown menu can contain a message.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Floated Content

A dropdown menu can contain floated content.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Input

A dropdown menu can contain an input.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Image

A dropdown menu can contain an image.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

States

Loading

A dropdown can show that it is currently loading data.

Error

An errored dropdown can alert a user to a problem.

Active

An active dropdown has its menu open.

Disabled

A disabled dropdown menu does not allow user interaction.

A disabled dropdown item does not allow user interaction.

Variations

Scrolling

A dropdown can have its menu scroll.

Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here.

If there's no pull request open for this, you should contribute!

Compact

A compact dropdown has no minimum width.

Fluid

A dropdown can take the full width of its parent.

Menu Direction

A dropdown menu or sub-menu can specify the direction it should open.

The example below shows (roughly) the desired markup but is not functional since we don't currently support nested dropdowns.

If there's no pull request open for this, you should contribute!

Usage

Open On Focus

A dropdown that opens when it is focussed on.

Close On Blur

A dropdown that closes when it blurs

Close On Escape

A dropdown that closes when the user presses the escape key.

Close On Change

A multiple selection dropdown can close when the user changes its value.

Select On Navigation

A dropdown can choose whether or not to change the value when navigating the menu with arrow keys.

Controlled

A dropdown can behave like an controlled input.

Uncontrolled

A dropdown can behave like an uncontrolled input.

No Results Message

You can change the no results message.

You can remove the no results message.

Remote

A dropdown's options can be controlled from outside based on search change.

Allow Additions

Using allowAdditions gives users the ability to add their own options.

allowAdditions can be used with multiple.

You can provide a custom additionLabel as a string.

Or provide additionLabel as a component.

Trigger

A dropdown can render a node in place of the text.

Multiple Custom Label

A "multiple" dropdown can render customized label for selected items.

Item Content

A dropdown item can be rendered differently inside the menu.

Search Input

A dropdown implements a search input shorthand.

Search Query

A dropdown allows to pass you the search query.

This example also shows how to override default behaviour of the search query and keep entered value after selection.

Custom Search Function

A dropdown allows you to provide your own search function.

Upward

A dropdown can open its menu upward.

Wrap Selection

A dropdown can enable or disable wrapping the selection to the start when it reaches the end and vice versa

This is the bottom