Dropdown

A 60px field that opens a menu of options with an icon, a label, a line of description and an optional badge. Picking one closes the menu and shows it in the field.

DesignReactVuePrompts

Copy

Field Title*

Choose an action...

This is a hint text to help user.Info Here

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import { DropdownField, SelectOption } from '@orvain/react';
 
<DropdownField
  label="Fruit"
  placeholder="Select a fruit"
  value={fruit}
  onValueChange={(next) => setFruit(next as string)}
>
  <SelectOption value="apple" label="Apple" />
  <SelectOption value="banana" label="Banana" />
  <SelectOption value="cherry" label="Cherry" />
</DropdownField>
 
// Multiple, searchable
<DropdownField label="Fruits" multiple searchable placeholder="Select fruits">
  <SelectOption value="apple" label="Apple" />
  <SelectOption value="banana" label="Banana" />
</DropdownField>

Add a closed Orvain Dropdown titled “Field Title”, required, with the placeholder “Choose an action...” and the hint “This is a hint text to help user.”; its menu holds 6 actions: • “Auto” • “Open link”, with a “New” badge • “Find file”, “Add to task list” and “Download file” • “Archive”, disabled

Orvain MCPIncluded with the library

When to use#

• To choose one option from a list too long for Radio buttons: a country, a role, an action.
• When space is tight and the current value matters more than the alternatives.

When not to use

• Use a Radio group for fewer than five options that people should compare.
• Use a combobox with filtering for long lists that people search.

Anatomy#

States#

Source#

Preview – final code pending

The Dropdown is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is publishedGet notified when the source is published

Used in these blocks