Input

A semantic field primitive with default, soft and glass surfaces. InputGroup gives icons, prefixes and actions one shared focus ring.

Import

import { Input, InputGroup, InputGroupAddon } from "@/components/ui/atoms/input";

Surface variants

Variant and radius are independent and consumer className remains the final override.

<Input variant="default" placeholder="Default" />
<Input variant="soft" radius="lg" placeholder="Soft" />
<Input variant="glass" radius="xl" placeholder="Glass" />

Single-focus InputGroup

The icon and suffix belong to the same field surface. Only the group draws focus; the editable input never creates a second ring.

⌘K

<InputGroup variant="glass" radius="xl">
  <InputGroupAddon position="start"><Search /></InputGroupAddon>
  <Input placeholder="Search everything..." />
  <InputGroupAddon position="end">⌘K</InputGroupAddon>
</InputGroup>

Invalid and disabled

Enter a valid email address.

<Input aria-invalid placeholder="Invalid value" />
<Input disabled value="Disabled" readOnly />

pnpm dlx shadcn@latest add @poyraz/input

Runtime dependencies

class-variance-authority@^0.7.1

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/poyraz-recipes

Installed files

@ui/atoms/input.tsx