# Input

A text field.

Source: [input.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/input.tsx)

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputBasic() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Project name</FieldLabel>
      <Input placeholder="Website redesign" />
    </Field>
  );
}
```

## Installation

Add the registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/input
```

## Usage

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function EmailInput() {
  return (
    <Field>
      <FieldLabel>Email</FieldLabel>
      <Input type="email" placeholder="ada@example.com" />
    </Field>
  );
}
```

Every input needs a label or an `aria-label`; a placeholder isn't enough. A
[Field](https://ui.jarv.is/components/field.md) links a `FieldLabel` to it, along with a description and an error.

## Examples

### Types

```tsx
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputTypes() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="sam@example.com" />
      </Field>
      <Field>
        <FieldLabel>Search</FieldLabel>
        <Input type="search" placeholder="Search tasks" />
      </Field>
      <Field>
        <FieldLabel>Seats</FieldLabel>
        <Input type="number" defaultValue={12} min={1} />
      </Field>
    </FieldGroup>
  );
}
```

### File

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputFile() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Attachment</FieldLabel>
      <Input type="file" />
    </Field>
  );
}
```

### Sizes

Set `size="lg"` for a taller input.

```tsx
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputSizes() {
  return (
    <FieldGroup className="max-w-sm">
      <Field>
        <FieldLabel>Workspace</FieldLabel>
        <Input placeholder="acme" />
      </Field>
      <Field>
        <FieldLabel>Company</FieldLabel>
        <Input size="lg" placeholder="Acme Inc." />
      </Field>
    </FieldGroup>
  );
}
```

### Invalid

Set `invalid` on its `Field` to mark the input as invalid. On its own, set `aria-invalid`.

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputInvalid() {
  return (
    <Field invalid className="max-w-sm">
      <FieldLabel>Billing email</FieldLabel>
      <Input type="email" defaultValue="sam@example" />
    </Field>
  );
}
```

### Disabled

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputDisabled() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Invoice number</FieldLabel>
      <Input disabled defaultValue="INV-1042" />
    </Field>
  );
}
```

### Read-only

```tsx
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export default function InputReadOnly() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Project slug</FieldLabel>
      <Input readOnly defaultValue="acme-website" />
    </Field>
  );
}
```

## Props

`size` replaces the native attribute of the same name.

| Part | Extends |
| --- | --- |
| `Input` | `<input>` |

The tables leave out `className`, `style` and `render`. Parts built on Base UI take them as its [styling](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.

### Input

| Prop    | Type                | Description          |
| ------- | ------------------- | -------------------- |
| `size?` | `"default" \| "lg"` | Default: `"default"` |