---
title: "Input"
description: "A single-line text field built on the native control. Base UI adds the link to Field and the invalid state without changing browser behavior."
kind: component
id: C-007
registry: "input"
docs: "https://koten.codehive.com.co/components/input"
markdown: "https://koten.codehive.com.co/md/components/input.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/input.json"
language: en
---

# Input · 入力

> Component C-007 in the Koten UI catalog.

A single-line text field built on the native control. Base UI adds the link to Field and the invalid state without changing browser behavior.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/input.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/input.json
```

## Files

- `@/components/ui/input.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Examples

### Types and sizes

type and autoComplete enable the right keyboard and autofill; size only adjusts the text, not the height.

```tsx
<Field label="Nombre" description="Como figura en el pedido.">
  <Input placeholder="Aiko Tanaka" autoComplete="name" />
</Field>

<Field label="Correo" description="Solo para avisos." required>
  <Input type="email" placeholder="nombre@ejemplo.com" autoComplete="email" />
</Field>

<Field label="Teléfono" description="Con código de país.">
  <Input type="tel" placeholder="+81 90 1234 5678" autoComplete="tel" />
</Field>

<Field label="Código postal" description="Formato japonés.">
  <Input size="sm" inputMode="numeric" placeholder="150-0001" autoComplete="postal-code" />
</Field>
```

### States

The error arrives from Field and activates aria-invalid; readOnly keeps the value focusable and disabled removes it from the tab order.

```tsx
<Field label="Correo" error="El correo no es válido.">
  <Input type="email" defaultValue="correo@" autoComplete="email" />
</Field>

<Field label="Código de cliente" description="Solo lectura.">
  <Input defaultValue="KURA-0142" readOnly />
</Field>

<Field label="Cliente" description="Asignado desde KURA." disabled>
  <Input defaultValue="KURA Distribución" />
</Field>
```

### Use inside a form

An Input inside Field with type, autofill and real submission.

```tsx
<form className="grid max-w-md gap-[var(--koten-gap)]">
  <Field
    label="Correo de contacto"
    description="Recibirás el estado del pedido y nada más."
    required
  >
    <Input
      type="email"
      name="email"
      autoComplete="email"
      placeholder="nombre@ejemplo.com"
    />
  </Field>

  <div className="flex flex-wrap items-center gap-[var(--koten-gap)]">
    <Button type="submit" variant="primary">Suscribirme</Button>
  </div>
</form>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `type` | `string` | `text` | Use the right native type (email, tel, number) for the keyboard and browser validation. |
| `size` | `sm \| md` | `md` | Adjusts the text size; height always comes from --koten-control-h. |
| `aria-invalid` | `boolean` | `—` | Inherited from Field's error; pass it only when the invalid state comes from another source. |
| `required` | `boolean` | `—` | Inherited from the containing Field and adds native browser validation. |
| `readOnly` | `boolean` | `false` | Keeps the value visible and copyable, and the control can still receive focus. |
| `disabled` | `boolean` | `false` | Removes the control from the tab order and paints it with the tint background. |
| `autoComplete` | `string` | `—` | Tells the browser which value to fill; improves speed and reduces typing errors. |
| `placeholder` | `string` | `—` | Only a format example; it never replaces the label or the description. |

## Accessibility

- Every Input sits inside a Field or next to a Label with htmlFor; the placeholder is not an accessible name.
- Correct type and autoComplete reduce errors and open the right keyboard on mobile.
- aria-invalid is inherited from Field's error; do not duplicate it or contradict it.
- disabled leaves the tab order; when the value must be copyable, prefer readOnly.

## Sources

- Catalog page: https://koten.codehive.com.co/components/input
- Markdown: https://koten.codehive.com.co/md/components/input.md
- Repository: https://github.com/codehive-colombia/koten