Input

The base input is for straightforward single values: names, search terms, URLs, and short configuration fields. It keeps the frame, hover state, invalid treatment, and read-only styling aligned with the rest of the Swiss system without forcing every field into a more complex composed pattern.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Input placeholder="Search the archive" />
<Input type="email" placeholder="team@example.com" />

Why This Primitive Exists

Not every field needs a grouped control or custom wrapper. The plain input covers the common case where one label maps to one value.

• Use it when the field can stand on its own with a normal label and helper text.
• Prefer it over InputGroup when prefixes and actions do not need to share one visual frame.
• Avoid overloading the field with embedded meaning that belongs in surrounding layout copy.

Examples

Basic Field

The default field is intentionally quiet. It should read as part of a form, not as an art-directed surface by itself.

<Input placeholder="Search the launch archive" />

Read-Only, Invalid, And Disabled States

The component includes repo-level styling for common field states so forms stay consistent without local overrides.

<Input value="swissstyles.dev" readOnly />
<Input aria-invalid defaultValue="invalid-domain" />
<Input disabled value="Disabled field" />

In Context

Use the plain input when a standard label and helper copy are enough. If the value depends on a prefix, suffix, or built-in action, switch to Input Group instead.

Guidance

Keep The Field Single-Purpose

• One input should capture one value.
• If the interface needs a unit label, command prefix, or trailing action button inside the same frame, use InputGroup.
• For long freeform text, use Textarea instead of stretching a single-line field into multiple jobs.

Let Surrounding Layout Carry Meaning

• Put labels, descriptions, and validation messages outside the field.
• Use readOnly when the value should stay selectable but not editable.
• Use aria-invalid when the input is in an error state so visual treatment and accessibility stay aligned.

Preserve Form Rhythm

• Keep widths consistent across related fields.
• Avoid stuffing icons into the bare input unless the pattern is already standardized elsewhere.
• If a field is disabled for workflow reasons, explain that in nearby copy rather than relying on opacity alone.

API Reference

Input

Input renders a native input and accepts the full React.ComponentProps<"input"> API.

Built-In Behaviors

Because the component is a thin wrapper around the native element, standard props like value, defaultValue, placeholder, name, autoComplete, and event handlers work unchanged.