# Input

A single-line text field. Always pair it with a visible label, using [Field](/components/field.md) or [Control and label](/components/control-and-label.md).

```tsx
// demo.tsx
import {Field, Input} from '@earendil-works/elanor-react';

export default function InputDemo() {
  return (
    <Field.Root name="email">
      <Field.Label>Email</Field.Label>
      <Input type="email" autoComplete="email" placeholder="name@example.com" />
    </Field.Root>
  );
}
```

## Usage

```tsx
import {Field, Input} from '@earendil-works/elanor-react';

<Field.Root name="email">
  <Field.Label>Email</Field.Label>
  <Input type="email" />
</Field.Root>;
```

`type` accepts `text`, `email`, `password`, `tel`, and `url`. For search, use [Search](/components/search.md); for multiple lines, use [Text area](/components/text-area.md); for other native types, use [`Field.Control`](/components/field.md#other-controls).

## Read-only

Read-only values can be focused, selected, and copied, and are submitted with the form.

```tsx
// read-only.tsx
import {Field, Input} from '@earendil-works/elanor-react';

export default function InputReadOnly() {
  return (
    <Field.Root name="workspaceId">
      <Field.Label>Workspace ID</Field.Label>
      <Input defaultValue="workspace-2048" readOnly />
    </Field.Root>
  );
}
```

## Disabled

Disabled inputs can't be focused and aren't submitted. Set `disabled` on `Field.Root` to disable the label too.

```tsx
// disabled.tsx
import {Field, Input} from '@earendil-works/elanor-react';

export default function InputDisabled() {
  return (
    <Field.Root name="inviteCode" disabled>
      <Field.Label>Invitation code</Field.Label>
      <Input placeholder="Invitations are closed" />
    </Field.Root>
  );
}
```

## API

### `Input`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'text' \| 'tel' \| 'url' \| 'email' \| 'password'` | `'text'` | Text-like input types. Other types throw; use Search for `search`. |

Also accepts Base UI [`Input`](https://base-ui.com/react/components/input.md) props.