---
title: Input
description: A text input field with platform-adaptive styling.
---
import Source from './_generated/input.mdx';

A text input — a floating label on Material, an inline label on iOS.

<DemoFrame component="input" />

## Installation

```bash
npx touchcn add input
```

## Usage

<CodeGroup>

```html Angular
<tcn-input label="Email" type="email" [(value)]="email" />
```

```tsx React
import { TcnInput } from '@/components/ui/input';

<TcnInput label="Email" type="email" onValueChange={setEmail} />
```

```vue Vue
<script setup lang="ts">
import { TcnInput } from '@/components/ui/input';
</script>

<template>
  <TcnInput v-model="email" label="Email" type="email" />
</template>
```

</CodeGroup>

## Props

| Prop            | Type                      | Default  | Description                                    |
| --------------- | ------------------------- | -------- | ---------------------------------------------- |
| `label`         | `string`                  | —        | Floating (MD) / inline (iOS) field label.      |
| `value`         | `string` (model, Angular) | `''`     | Two-way bound value.                           |
| `placeholder`   | `string`                  | —        | Placeholder text.                              |
| `type`          | `string`                  | `'text'` | Native input type.                             |
| `error`         | `boolean`                 | `false`  | Tint the outline / border destructive.         |
| `disabled`      | `boolean`                 | `false`  | Disable the field.                             |
| `onValueChange` | `(value: string) => void` | —        | Convenience callback with the raw value (React). |

<Source />