Form

Input

Text input with label, error state, and helper text.

Available inreactangular

Preview

Live previewreal component

TerminalBash

$ npx mcp-elements add input

input-example.tsxTSX

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

export function Example() {
  return (
    <Input type="email" placeholder="you@example.com" />
  )
}

Prop	Type	Default	Description
`type`	`string`	`'text'`	HTML input type (text, email, password, number, etc.)
`placeholder`	`string`	—	Placeholder text
`value`	`string`	—	Controlled value of the input
`defaultValue`	`string`	—	Initial value when uncontrolled
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	—	Called when the value changes
`disabled`	`boolean`	`false`	Whether the input is disabled
`className`	`string`	—	Additional classes merged onto the input