Skip to main content
A React component that accepts SelectComponentProps as props. 
export type SelectComponent = React.ComponentType<SelectComponentProps>;

​
SelectComponentOption

export interface SelectComponentOption<Value = string> {
  label: string;
  value: Value;
  description?: string;
}
​
label
string
required
The display text for the option.
​
value
Value
required
The value associated with the option. Defaults to string when no generic is provided.
​
description
string
An optional description displayed alongside the option label.

​
SelectComponentProps

export interface SelectComponentProps<Value = string> {
  id?: string;
  options: Array<SelectComponentOption<Value>>;
  value?: SelectComponentOption<Value>;
  onChange?: (option: SelectComponentOption<Value>) => void;
  onBlur?: () => void;
  placeholder?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  hasError?: boolean;
  isLoading?: boolean;
  width?: 'fill' | 'fit-content' | 'auto';
  placement?: AlignedPlacement | Side;
  isWithinPortal?: boolean;
  'aria-label'?: string;
  'aria-labelledby'?: string;
  renderOption?: (option: SelectComponentOption<Value>) => React.ReactNode;
  renderSelectedOption?: (option: SelectComponentOption<Value>) => React.ReactNode;
  ref?: React.Ref<any>;
}
​
id
string
An optional HTML id attribute for the select element.
​
options
Array<SelectComponentOption>
required
The list of options to display in the dropdown.
​
value
SelectComponentOption
The currently selected option.
​
onChange
(option: SelectComponentOption) => void
Callback invoked when the user selects an option.
​
onBlur
() => void
Callback invoked when the select loses focus.
​
placeholder
string
Placeholder text displayed when no option is selected.
​
isDisabled
boolean
When true, the select is non-interactive and should be rendered in a visually disabled state.
​
isRequired
boolean
When true, indicates the field is required.
​
hasError
boolean
When true, the select is in an error state.
​
isLoading
boolean
When true, indicates that options are being loaded.
​
width
'fill' | 'fit-content' | 'auto'
Controls the width of the select trigger button.
  • 'fill' — stretches to fill its container.
  • 'fit-content' — shrinks to fit its content.
  • 'auto' — intrinsic size with sensible min and max bounds.
​
placement
AlignedPlacement | Side
The preferred placement of the dropdown menu relative to the trigger. Side is 'top' | 'bottom' | 'left' | 'right' and AlignedPlacement is `${Side}-${'start' | 'end'}` (e.g. 'bottom-start').
​
isWithinPortal
boolean
When true, the dropdown menu should be rendered inside a React portal.
​
aria-label
string
An accessible label for the select. Use this when there is no visible label in the DOM.
​
aria-labelledby
string
The id of an external element that labels this select. Pass this as the aria-labelledby attribute on your root element to satisfy accessibility requirements when a visible label exists in the DOM.
​
renderOption
(option: SelectComponentOption) => React.ReactNode
Custom render function for each option in the dropdown list.
​
renderSelectedOption
(option: SelectComponentOption) => React.ReactNode
Custom render function for the selected value displayed in the control.
​
ref
React.Ref<any>
A React ref that should be forwarded to the underlying DOM element.