Dropdown

Dropdown is is a graphical user interface element that gives users a list of possibilities and allows them to select one value from the list

Usage

Code Editor
Copy
import { Dropdown } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { DropdownOptionsProps } from '@erudilabs/alma'
DropdownOptionsProps = { label: string; value: string | nuber; }[]

To make Dropdown options you must have an array of object and use DropdownOptionsProps types like example below

Code Editor
Copy
const options: DropdownOptionsProps = [
  {
    label: 'Harvad',
    value: 'harvad',
  },
  {
    label: 'Standford',
    value: 'standford',
  },
  {
    label: 'Oxford',
    value: 'oxford',
  },
  {
    label: 'Cambridge',
    value: 'cambridge',
  },
  {
    label: 'Columbia',
    value: 'columbia',
  },
]

Component

Here preview and detail explain of Radio component


Default

Code Editor
Copy
<Dropdown
  placeholder="Select one of university below the list"
  name="university"
  label="Select university"
  options={options}
/>

Disabled

Code Editor
Copy
<Dropdown
  placeholder="Select one of university below the list"
  name="university-disabled"
  label="Select university"
  options={options}
  disabled
/>

Helper

This field is using a helper text

Code Editor
Copy
<Dropdown
  placeholder="Select one of university below the list"
  name="university-helper"
  label="Select university"
  options={options}
  helper="This field is using a helper text"
/>

Error

An unexpected error occurred. Please try again later

Code Editor
Copy
<Dropdown
  placeholder="Select one of university below the list"
  name="university-error"
  label="Select university"
  options={options}
  errorMessage="An unexpected error occurred. Please try again later"
/>

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

name

string

placeholder?

string

otions?

DropdownOptionsProps

defaultValue?

string

errorMessage?

string

helper?

ReactNode

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void

searchPlaceholder?

string

searcNotFoundText?

string

searchable?

boolean

clearable?

boolean