# Input

Filled single-line text field with focus, invalid and disabled states.

[Documentation](https://eoria.adamtrip.pt/components/input/)

[Registry source](https://eoria.adamtrip.pt/r/input.json)

npm dependencies: @eoria/core, react-native-unistyles.

Registry dependencies: text.

```sh
npx @eoria/cli add input
```

## Usage

```tsx
import { Input } from '@/components/ui/input'

<Input placeholder="you@example.com" keyboardType="email-address" value={email} onChangeText={setEmail} />
<Input invalid placeholder="Required" />
<Input disabled value="locked" />
```

## Variants

| Prop       | Values                          | Default |
| ---------- | ------------------------------- | ------- |
| `size`     | `sm` 44pt, `md` 52pt, `lg` 56pt | `md`    |
| `invalid`  | boolean                         | `false` |
| `disabled` | boolean                         | `false` |

Focus is tracked internally and drives the ring colour. Every `TextInput` prop passes through.

`TextInputContext` decides which text field Input, [Textarea](https://eoria.adamtrip.pt/components/textarea.md) and [InputGroup](https://eoria.adamtrip.pt/components/input-group.md) render. It defaults to React Native's `TextInput`. [Sheet](https://eoria.adamtrip.pt/components/sheet.md) provides `BottomSheetTextInput` inside its content, so these fields work with the sheet's keyboard handling without changes. Provide your own value for a container that needs a different input.

## Notes

- The frame is a 1.5pt transparent border over the `muted` fill, so the focus and error borders appear without a layout shift.
- `placeholderTextColor` and `selectionColor` come from the theme.
- Pair with [Field](https://eoria.adamtrip.pt/components/field.md) for a label, description and error message wired for screen readers.

## Source

[`registry/ui/input.tsx`](https://github.com/adamtrip-solutions/eoria/blob/main/registry/ui/input.tsx)