Implementation:Apache Druid OptionsInput

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Exploration
Last Updated	2026-02-10 10:00 GMT

Overview

OptionsInput is a React component that renders a tag-based multi-select input for choosing from a predefined set of option values.

Description

The component displays selected options as BlueprintJS Tags within a tag input container. Each tag opens a Popover menu that allows the user to swap the selected option for a different available one. A plus-icon tag at the end opens a menu of available (unselected) options for adding new selections. Tags can be removed unless the nonEmpty constraint prevents removing the last item.

Usage

Used in the Explore view's control pane for selecting query configuration options such as sort directions, aggregation types, or other enumerated settings. The component is typically bound to option values from the explore model.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/control-pane/options-input.tsx
• Lines: 1-106

Signature

export interface OptionsInputProps {
  options: readonly OptionValue[];
  value: OptionValue[];
  onValueChange(value: OptionValue[]): void;
  optionLabel?(o: OptionValue): string;
  allowDuplicates?: boolean;
  nonEmpty?: boolean;
}

export const OptionsInput = function OptionsInput(props: OptionsInputProps): JSX.Element;

Import

import { OptionsInput } from './views/explore-view/components/control-pane/options-input';

I/O Contract

Inputs

Name	Type	Required	Description
options	readonly OptionValue[]	Yes	The full set of available option values to choose from
value	OptionValue[]	Yes	The currently selected option values
onValueChange	(value: OptionValue[]) => void	Yes	Callback invoked when the selection changes
optionLabel	(o: OptionValue) => string	No	Custom label function for displaying option values; defaults to String()
allowDuplicates	boolean	No	When true, allows the same option to be selected multiple times
nonEmpty	boolean	No	When true, prevents removing the last remaining selection

Outputs

Name	Type	Description
JSX.Element	ReactElement	A tag input with selectable and removable option tags plus an add button

Usage Examples

Basic Options Selection

<OptionsInput
  options={['ASC', 'DESC']}
  value={selectedSortOrders}
  onValueChange={setSelectedSortOrders}
  nonEmpty
/>

Options with Custom Labels

<OptionsInput
  options={availableGranularities}
  value={selectedGranularities}
  onValueChange={setSelectedGranularities}
  optionLabel={(o) => capitalizeFirst(String(o))}
  allowDuplicates={false}
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development