SelectComponent

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;
}

string

required

The display text for the option.

Value

required

The value associated with the option. Defaults to string when no generic is provided.

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>;
}

string

An optional HTML id attribute for the select element.

Array<SelectComponentOption>

required

The list of options to display in the dropdown.

SelectComponentOption

The currently selected option.

(option: SelectComponentOption) => void

Callback invoked when the user selects an option.

() => void

Callback invoked when the select loses focus.

string

Placeholder text displayed when no option is selected.

boolean

When true, the select is non-interactive and should be rendered in a visually disabled state.

boolean

When true, indicates the field is required.

boolean

When true, the select is in an error state.

boolean

When true, indicates that options are being loaded.

'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.

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').

boolean

When true, the dropdown menu should be rendered inside a React portal.

string

An accessible label for the select. Use this when there is no visible label in the DOM.

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.

(option: SelectComponentOption) => React.ReactNode

Custom render function for each option in the dropdown list.

(option: SelectComponentOption) => React.ReactNode

Custom render function for the selected value displayed in the control.

React.Ref<any>

A React ref that should be forwarded to the underlying DOM element.

Get Started

Graph types

Customisation

Configuration

Editor

Advanced

Reference

`SelectComponentOption`

`SelectComponentProps`

​SelectComponentOption

​SelectComponentProps

`SelectComponentOption`

`SelectComponentProps`