Form

Select

Dropdown select with search and custom options.

Available inreactangular

Preview

Live previewreal component

No tool selected

Install

TerminalBash

$ npx mcp-elements add select

Usage

select-example.tsxTSX

import { Select } from '@mcp-elements/react'

export function Example() {
  return (
    <Select
      placeholder="Choose a tool"
      options={[
        { value: 'search_code', label: 'search_code' },
        { value: 'create_issue', label: 'create_issue' },
        { value: 'run_query', label: 'run_query', disabled: true },
      ]}
      onChange={(value) => console.log(value)}
    />
  )
}

Props

Prop	Type	Default	Description
`options *`	`SelectOption[]`	—	List of selectable options ({ value, label, disabled? })
`placeholder`	`string`	`'Select...'`	Text shown when no option is selected
`onChange`	`(value: string) => void`	—	Called with the value when a selection is made
`className`	`string`	—	Additional classes for the select container