---
route: /components/input
menu: Components
---

import { Playground, Props } from 'docz';
import { Input } from './Input.tsx';

# Input

Text input element

## Properties

<Props of={Input} />

## MML string

```xml
<mml type="card">
  <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
  <button name="action" value="submit">Submit</button>
</mml>
```

## Basic usage

<Playground>
  <MML
    source={`
    <mml type="card">
      <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
      <button name="action" value="submit">Submit</button>
    </mml>
  `}
  />
</Playground>


## Custom Input type

<Playground>
  <MML
    source={`
    <mml>
      <input name="answer" value="hidden value used in form" type="hidden"></input>
      <button name="action" value="confirm">Confirm</button>
    </mml>
  `}
  />
</Playground>