Dropdown for selecting an Option among different options.

The <Select> is a form component to choose one option from a list. A <Select> must include the <Select.Item>. It can optionally include a <Select.Section>, which behaves as divider between two or more category options.

It behaves similar to the <Menu>, but the use case is different. A <Select> is used in forms.



To import the component you just have to use this code below.

import { Select } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


labelstringnoneSet a label for the select.
placeholderstringBased on OS language (en and de supported)Set the placeholder for the select.
disabledbooleanfalseDisables the select.
disabledKeysIterable<Key>noneSets selected keys disabled.
selectedKeyKeynoneThe selected key of the select.
defaultSelectedKeyIterable<Key>noneSet a default selected key.
requiredbooleanfalseSet the select required.
errorbooleanfalseAllow to set an error to the select.
errorMessagestring-Set the error message for the select.
widthstring | numberfullSets the width of the field. You can see allowed tokens here:
onChange(key: Key) => anynoneHandler that is called when the selection changes.


Standard Select

This example shows how the <Select> would behave without any specific properties.

Favorite character

Default selected Key (uncontrolled)

If you want to have a default selected item in the <Select> you can set the property for it like it is in the example below.

Choose Color (uncontrolled)

Disabled Select

If you want that the user can't interact with the <Select> anymore you can set the disabled propery.

Disabled Select:

Disabled Keys

You can also set some keys disabled, for that you have to use the disabledKeys property.

Favorite Color

Select with Sections

In this example you can see how to use the <Select.Section> in the <Select> itself. A clear line appears to separate different options, and you can set the title of <Select.Section> by using <Header> component inside <Select.Section> .

Choose your Fandom