Implementation:TobikoData Sqlmesh ListboxShow
| Knowledge Sources | |
|---|---|
| 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']}
/>
)
}