Select
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.
Import
import { Select } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
Select
| Property | Type | Default | Description |
|---|---|---|---|
label | string | none | Set a label for the select. |
placeholder | string | Based on OS language (en and de supported) | Set the placeholder for the select. |
disabled | boolean | false | Disables the select. |
disabledKeys | Iterable<Key> | none | Sets selected keys disabled. |
selectedKey | Key | none | The selected key of the select. |
defaultSelectedKey | Iterable<Key> | none | Set a default selected key. |
required | boolean | false | Set the select required. |
error | boolean | false | Allow to set an error to the select. |
errorMessage | string | - | Set the error message for the select. |
width | string | number | full | Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width |
onChange | (key: Key) => any | none | Handler that is called when the selection changes. |
Select.Option
Sorry! There are currently no props available.
Examples
Standard Select
This example shows how the <Select> would behave without any specific properties.
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.
Disabled Select
If you want that the user can't interact with the <Select> anymore you can set the disabled propery.
Disabled Keys
You can also set some keys disabled, for that you have to use the disabledKeys property.
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> .