Dropdown

Examples
Dropdown with placeholder
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Dropdown
  id="id"
  label="Job Title"
  placeholder="Please select a role title"
  value=""
>
  <option value="1">Developer</option>
  <option value="2">Designer</option>
</Dropdown>
Dropdown with options group
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Dropdown
  id="id"
  label="Location"
  placeholder="Please select a location"
  value=""
>
  <optgroup label="Major Cities">
    <option value="3004">Melbourne</option>
    <option value="3002">Sydney</option>
  </optgroup>
  <option value="3020">Wonthaggi</option>
</Dropdown>
Dropdown with icon
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Dropdown
  icon={<IconLocation />}
  id="id"
  label="Location"
  placeholder="Please select a location"
  value=""
>
  <option value="3004">Melbourne</option>
  <option value="3002">Sydney</option>
</Dropdown>
Dropdown without placeholder
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Dropdown id="id" label="Job Title" value="">
  <option value="1">Developer</option>
  <option value="2">Designer</option>
</Dropdown>
Dropdown in invalid state
Theme: seekAnz
Required field
Theme: seekBusiness
Required field
Theme: jobsDbRebrand
Required field
Theme: jobsDb
Required field
Theme: jobStreet
Required field
Theme: jobStreetClassic
Required field
Theme: wireframe
Required field
Code:
<Dropdown
  id="id"
  label="Job Title"
  message="Required field"
  tone="critical"
  value=""
>
  <option value="1">Developer</option>
  <option value="2">Designer</option>
</Dropdown>
Dropdown on Brand Background
Theme: seekAnz
Theme: seekBusiness
Theme: jobsDbRebrand
Theme: jobsDb
Theme: jobStreet
Theme: jobStreetClassic
Theme: wireframe
Code:
<Box background="brand" padding="small">
  <Dropdown
    id="id"
    label="Job Title"
    placeholder="Please select a role title"
    value=""
  >
    <option value="1">Developer</option>
    <option value="2">Designer</option>
  </Dropdown>
</Box>

Required props

children
ValidDropdownChildren | ValidDropdownChildren[]
value
string | number | string[]
onChange
(event: FormEvent<HTMLSelectElement>) => void
id
string

Optional props

onBlur
(event: FocusEvent<HTMLSelectElement>) => void
onFocus
(event: FocusEvent<HTMLSelectElement>) => void
placeholder
string
name
string
tone
"critical" | "positive" | "neutral"
autoComplete
string
disabled
boolean
label
ReactNode
secondaryLabel
ReactNode
tertiaryLabel
ReactNode
description
ReactNode
message
ReactNode
reserveMessageSpace
boolean
aria-describedby
string
data
Record<string, string | number>
autoFocus
boolean
icon
ReactNode
required
boolean
ref
(instance: HTMLSelectElement | null) => void | RefObject<HTMLSelectElement>

Further References