Implementation:TobikoData Sqlmesh ListboxShow

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Components
Last Updated	2026-02-07 20:00 GMT

Overview

A multi-select listbox component with a funnel icon that manages visibility options for UI elements.

Description

ListboxShow is a React component built on Headless UI's Listbox that provides a dropdown interface for toggling multiple visibility options. The component displays a funnel icon button that expands to show a list of checkable items. When options are selected or deselected, it triggers callback functions to control the visibility of corresponding UI elements. The component uses @heroicons for visual indicators (funnel icon for the trigger, checkmark for selected items) and supports responsive design with screen reader-only text on smaller screens.

Usage

Use this component when you need to provide users with a filter-style control that toggles the visibility of multiple UI elements simultaneously. It's particularly useful in data visualization contexts where users need to show/hide different categories or data types.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/listbox/ListboxShow.tsx

Signature

export default function ListboxShow({
  options,
  value = [],
}: {
  options: Record<
    string,
    | Optional<React.Dispatch<React.SetStateAction<boolean>>>
    | ((value: boolean) => void)
  >
  value: string[]
}): JSX.Element

Import

import ListboxShow from '@components/listbox/ListboxShow'

I/O Contract

Inputs

Name	Type	Required	Description
options	((value: boolean) => void)>	Yes	Object mapping option keys to their toggle callback functions
value	string[]	No	Array of currently selected option keys (defaults to empty array)

Outputs

Name	Type	Description
JSX.Element	React component	Rendered multi-select listbox with funnel icon trigger

Usage Examples

import { useState } from 'react'
import ListboxShow from '@components/listbox/ListboxShow'

function DataVisualization() {
  const [showCharts, setShowCharts] = useState(true)
  const [showTables, setShowTables] = useState(true)
  const [showMetrics, setShowMetrics] = useState(false)

  return (
    <ListboxShow
      options={{
        'Charts': setShowCharts,
        'Tables': setShowTables,
        'Metrics': setShowMetrics,
      }}
      value={['Charts', 'Tables']}
    />
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack