Input

A base input primitive matching the Monolith architectural grid.

Basic usage of the Monolith Input.

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/input.json"

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

import { Input } from "@/components/ui/input"
 
export function MyComponent() {
  return (
    <Input placeholder="Type something..." />
  );
}

Picture

Please enter a valid email address.

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`.

On This Page