MultiLevelSelect

Multi-level select component with collapsible sections.

import { MultiLevelSelect } from "@tetherto/mdk-react-devkit";

MultiLevelSelect exposes no documented props.

Usage

Grouped select control with collapsible sections, built on the MDK Select primitive.

Sub-components

All sub-components are accessed through the MultiLevelSelect namespace.

Export	Description
`MultiLevelSelect.Root`	Select root (controls open state and value).
`MultiLevelSelect.Trigger`	Button that opens the dropdown.
`MultiLevelSelect.Value`	Displays the currently selected value.
`MultiLevelSelect.Content`	Floating list panel.
`MultiLevelSelect.Item`	Selectable option.
`MultiLevelSelect.Section`	Collapsible group of items with a section header.

Props — MultiLevelSelect.Section

Prop	Type	Required	Default	Description
`sectionTitle`	`ReactNode`	yes	—	Title displayed in the section header.
`children`	`ReactNode`	no	—	`MultiLevelSelect.Item` elements in the section.
`open`	`boolean`	no	—	Controlled open state.
`defaultOpen`	`boolean`	no	`false`	Initial open state (uncontrolled).
`onToggle`	`(open: boolean) => void`	no	—	Called when the section is expanded or collapsed.

Notes

MultiLevelSelect.Root, Trigger, Value, Content, and Item are pass-through re-exports of the base Select primitives.
MultiLevelSelect.Section supports both controlled (open + onToggle) and uncontrolled (defaultOpen) patterns.

Example

/** * Runnable example for MultiLevelSelect. */import { useState } from 'react'import { MultiLevelSelect } from '@tetherto/mdk-react-devkit'export const MultiLevelSelectExample = () => {  const [worker, setWorker] = useState('')  return (    <div className="mdk-example-col">      <MultiLevelSelect.Root value={worker} onValueChange={setWorker}>        <MultiLevelSelect.Trigger>          <MultiLevelSelect.Value placeholder="Select worker..." />        </MultiLevelSelect.Trigger>        <MultiLevelSelect.Content>          <MultiLevelSelect.Section sectionTitle="Foundry EU" defaultOpen>            <MultiLevelSelect.Item value="worker-eu-1">Worker EU-1</MultiLevelSelect.Item>            <MultiLevelSelect.Item value="worker-eu-2">Worker EU-2</MultiLevelSelect.Item>          </MultiLevelSelect.Section>          <MultiLevelSelect.Section sectionTitle="AntPool">            <MultiLevelSelect.Item value="worker-ap-1">Worker AP-1</MultiLevelSelect.Item>          </MultiLevelSelect.Section>        </MultiLevelSelect.Content>      </MultiLevelSelect.Root>    </div>  )}