Photonix

Dropdown

A selectable list of items that appears when clicking a trigger element.

Preview

Select an option...
Usage
import { Dropdown } from '@photonix/ultimate';

const options = [
  { value: 'profile', label: 'Profile' },
  { value: 'schedule', label: 'Schedule' },
  { value: 'settings', label: 'Settings' },
];

<Dropdown 
  label="Single Select" 
  options={options} 
  value={value} 
  onChange={setValue} 
/>

Component API

Dropdown

Prop
Type
Default
Description
mode
"single" | "multi"
'single'
Single select mode Multi select mode
value
string | string[]
-
Current selected value. Current selected values.
defaultValue
string | string[]
-
Default value for uncontrolled mode. Default values for uncontrolled mode.
onChange
((value: string) => void) | ((values: string[]) => void)
-
Callback when the value changes. Callback when the values change.
label
string
-
Label text.
labelStyle
"inside" | "outside"
'outside'
Whether the label is placed inside or outside the input box. Default is 'outside'.
helperText
string
-
Supporting text displayed below the field.
error
boolean
-
If true, the field will be in error state.
leadingIcon
React.ReactNode
-
Icon to display at the start of the field (only for outside label).
placeholder
string
'Select...'
Placeholder text when no option is selected.
options
DropdownOption[]
[]
Options to display in the dropdown.
disabled
boolean
-
If true, the dropdown is disabled.
clearable
boolean
true
If false, hides the clear button. Default is true.
className
string
-
Additional class name.
style
React.CSSProperties
-
Additional styles.
width
string | number
-
Fixed width of the dropdown.
portal
boolean
true
Whether to render the dropdown menu in a portal. Default is true.
fullWidth
boolean
true
Whether the dropdown takes up full width of container. Default is true.
size
"large" | "medium"
'large'
Size of the dropdown. Default is 'large'.
matchWidth
boolean
true
Whether the dropdown list width should match the trigger width. Default is true.
presentation
OverlayPresentation
'auto'
Presentation mode. In auto mode, mobile viewports use a sheet and desktop uses a popover.
sheetTitle
string
-
Title used for the mobile sheet. Defaults to label or placeholder.
renderTrigger
((props: { onClick: () => void; value: string | string[]; isOpen: boolean; ref: React.RefObject<HTMLDivElement | null>; }) => React.ReactNode)
-
Slot for custom trigger. Receives props like onClick, value, isOpen.

Variants

Basic Usage

Single selection dropdown with options.

Select...
Basic Usage
import { Dropdown } from '@photonix/ultimate';
import { useState } from 'react';

const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
];

export default function DropdownExample() {
  const [value, setValue] = useState('');

  return (
    <Dropdown 
      label="Select an option" 
      options={options} 
      value={value} 
      onChange={setValue} 
    />
  );
}

Multi-Select

Use mode='multi' to allow selecting multiple options.

Select multiple...
Multi-Select
<Dropdown 
  mode="multi"
  label="Select tags" 
  options={tags} 
  value={selectedTags} 
  onChange={setSelectedTags} 
/>

Validation

Show error states and helper text.

Select...
This field is required
Validation
<Dropdown 
  label="Required Field" 
  error={hasError}
  helperText={hasError ? "This field is required" : ""}
  // ...
/>

Sheet Presentation

Force the mobile sheet presentation for testing responsive behavior on any viewport.

Open as sheet...
Sheet Presentation
<Dropdown
  label="Sheet Select"
  sheetTitle="Choose destination"
  presentation="sheet"
  options={options}
  value={value}
  onChange={setValue}
/>

Width & Full Width

Dropdown is full-width by default. You can set a fixed width or set fullWidth to false (auto width).

Select...
Select...
Width & Full Width
<Dropdown label="Auto Width" fullWidth={false} options={options} />
<Dropdown label="Fixed Width" width="200px" options={options} />

On this page

Preview
Component API
Variants
Basic Usage
Multi-Select
Sheet Presentation
Validation
Photonix UI - React Components, Templates & Figma Design System