Form

Switch

Toggle switch for boolean settings.

Available inreactangular

Preview

Live previewreal component

Auto-approve safe tool callsStream partial results

Install

TerminalBash

$ npx mcp-elements add switch

Usage

switch-example.tsxTSX

import { Switch } from '@mcp-elements/react'
import { useState } from 'react'

export function Example() {
  const [checked, setChecked] = useState(true)
  return (
    <label className="flex items-center gap-3">
      <Switch checked={checked} onCheckedChange={setChecked} />
      Auto-approve safe tool calls
    </label>
  )
}

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the switch is on
`onCheckedChange`	`(checked: boolean) => void`	—	Called when the checked state should change
`disabled`	`boolean`	—	Whether the switch is disabled
`id`	`string`	—	HTML id applied to the switch button
`name`	`string`	—	Name for a hidden input, useful inside forms