# Input

A base input primitive matching the Monolith architectural grid.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



Basic usage of the Monolith Input.



<ComponentPreview name="input-demo">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Input type="email" placeholder="Email" />
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/input.json"
```

## Usage [#usage]

After you add the component with the CLI, import it from your UI folder:

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

export function MyComponent() {
  return (
    <Input placeholder="Type something..." />
  );
}
```

## Examples [#examples]

### File [#file]

<ComponentPreview name="input-file">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="picture">
        Picture
      </Label>

      <Input id="picture" type="file" />
    </div>
  </div>
</ComponentPreview>

### Disabled [#disabled]

<ComponentPreview name="input-disabled">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <Input type="email" placeholder="Email" />
  </div>
</ComponentPreview>

### With Label [#with-label]

<ComponentPreview name="input-with-label">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">
        Email
      </Label>

      <Input type="email" id="email" placeholder="Email" />
    </div>
  </div>
</ComponentPreview>

### With Button [#with-button]

<ComponentPreview name="input-with-button">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="flex w-full max-w-sm items-center space-x-2">
      <Input type="email" placeholder="Email" />

      <Button type="submit">
        Subscribe
      </Button>
    </div>
  </div>
</ComponentPreview>

### Error State [#error-state]

<ComponentPreview name="input-error">
  <div className="flex flex-col gap-4 py-8 w-full max-w-sm mx-auto">
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email-error" className="text-semantic-danger">
        Email
      </Label>

      <Input type="email" id="email-error" placeholder="Email" aria-invalid="true" />

      <p className="text-sm text-semantic-danger">
        Please enter a valid email address.
      </p>
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Input` component extends the standard HTML input attributes and adds the following props:

| Attribute      | Type      | Description                                                               |
| -------------- | --------- | ------------------------------------------------------------------------- |
| `type`         | `string`  | The input type (e.g. `text`, `email`, `password`, `file`).                |
| `disabled`     | `boolean` | Disables the input and reduces opacity.                                   |
| `aria-invalid` | `boolean` | Applies the error state styling (red border and ring) when set to `true`. |