Input

A text field.

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 registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add input
pnpm dlx shadcn@latest add @jarvis/input

Usage

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 links a FieldLabel to it, along with a description and an error.

Examples

Types

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

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.

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.

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

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

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 and composition guides describe.

Input

Prop	Type	Default
`size`	`"default" \| "lg"`	`"default"`