Text Field

A single-line text field with the macOS hairline border and accent focus ring.

@cupertinoui/inputRegistry JSON

Installation

pnpm dlx shadcn@latest add @cupertinoui/input

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<Input placeholder="Name" />

Examples

Form

macOS forms align the labels to the right of a shared column.

First name:Last name:Email:

"use client"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

// macOS forms align labels to the right of a shared column.
export default function InputForm() {
  return (
    <div className="grid w-full max-w-sm grid-cols-[auto_1fr] items-center gap-x-3 gap-y-2.5">
      <Label htmlFor="first" className="justify-end">
        First name:
      </Label>
      <Input id="first" defaultValue="John" />
      <Label htmlFor="last" className="justify-end">
        Last name:
      </Label>
      <Input id="last" defaultValue="Appleseed" />
      <Label htmlFor="email" className="justify-end">
        Email:
      </Label>
      <Input id="email" type="email" placeholder="john@example.com" />
    </div>
  )
}

States

Placeholder, invalid (aria-invalid) and disabled.

"use client"

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

export default function InputStates() {
  return (
    <div className="flex w-full max-w-60 flex-col gap-3">
      <Input placeholder="Placeholder" />
      <Input defaultValue="Invalid value" aria-invalid />
      <Input defaultValue="Disabled" disabled />
    </div>
  )
}

API Reference

Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.

Input

A styled native input. Accepts every input attribute.

Prop	Type	Description
`aria-invalid`	`boolean`	Shows the red error ring.
`className`	`string`	Extra classes, merged with the component's own.