Dropdown - Semantic UI React

Form Select Menu

src/modules/Dropdown/Dropdown.js

Semantic UI Dropdown Docs

Props

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

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

A selection dropdown can allow multiple selections.

A selection dropdown can allow multiple search selections.

Type something that results in no results found in the dropdown search. The dropdown arrow not being on top of the text.

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

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

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!

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

A simple dropdown can open without Javascript.

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!

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!

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!

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!

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!

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!

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!

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!

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!

A dropdown can show that it is currently loading data.

An errored dropdown can alert a user to a problem.

An active dropdown has its menu open.

A disabled dropdown menu does not allow user interaction.

A disabled dropdown item does not allow user interaction.

A dropdown can have its menu scroll.

A compact dropdown has no minimum width.

A dropdown can take the full width of its parent.

A dropdown that opens when it is focussed on.

A dropdown that closes when it blurs

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

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

A dropdown can behave like an controlled input.

A dropdown can behave like an uncontrolled input.

You can change the no results message.

You can remove the no results message.

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

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.

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

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

A dropdown item can be rendered differently inside the menu.

A dropdown implements a search input shorthand.

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.

A dropdown allows the search to ignore diacritics.

A dropdown allows you to provide your own search function.

A dropdown can open its menu upward.

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

This is the bottom

Blazing deployments by