Eingabe

Ein einzeiliges Textfeld für Anmeldungen, Suchleisten und Bestellformulare – mit dem neobrutalistischen Stil mit dickem Rahmen und starkem Schatten.

import {
  Field,
  FieldDescription,

Das Input erfasst eine einzelne Textzeile – Namen, E-Mail-Adressen, Suchanfragen. Basiert auf der Komponente Base UI Input, einem dünnen Wrapper um das native <input>, gekleidet in das neobrutalistische Rezept: dicker Rahmen, harter Schatten und eine kontraststarke Fokus-Umrandung.

Typische Anwendungsfälle:

Anmelde- und Registrierungsformulare – E-Mail-, Benutzernamen- und Passwortfelder im Zusammenspiel mit Field und FieldLabel.
Suchleisten – inline mit einem Button oder mit Icons über InputGroup.
Checkout- und Einstellungsseiten – Adressen, Kartennummern und Profilfelder, angeordnet in einer FieldGroup.

Installation


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

components/ui/input.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

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

<Input />

Beispiele

Basis

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

export function InputBasic() {

Field

Verwende Field, FieldLabel und FieldDescription, um eine Eingabe mit Label und Beschreibung zu erstellen.

import {
  Field,
  FieldDescription,

Field Group

Verwende FieldGroup, um mehrere Field-Blöcke anzuzeigen und Formulare zu erstellen.

import { Button } from "@/components/ui/button"
import {
  Field,

Deaktiviert

Verwende die Prop disabled, um die Eingabe zu deaktivieren. Um den deaktivierten Zustand zu gestalten, füge das Attribut data-disabled zur Komponente Field hinzu.

import {
  Field,
  FieldDescription,

Ungültig

Verwende die Prop aria-invalid, um die Eingabe als ungültig zu markieren. Um den ungültigen Zustand zu gestalten, füge das Attribut data-invalid zur Komponente Field hinzu.

import {
  Field,
  FieldDescription,

Datei

Verwende die Prop type="file", um eine Dateieingabe zu erstellen.

import {
  Field,
  FieldDescription,

Inline

Verwende Field mit orientation="horizontal", um eine Inline-Eingabe zu erstellen. Kombiniere es mit Button, um eine Sucheingabe mit einem Button zu erstellen.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Raster

Verwende ein Raster-Layout, um mehrere Eingaben nebeneinander anzuordnen.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Erforderlich

Verwende das Attribut required, um erforderliche Eingaben zu kennzeichnen.

import {
  Field,
  FieldDescription,

Badge

Verwende Badge im Label, um ein empfohlenes Feld hervorzuheben.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group

Um Icons, Text oder Buttons innerhalb einer Eingabe hinzuzufügen, verwende die Komponente InputGroup. Weitere Beispiele findest du bei der Komponente Input Group.

import { InfoIcon } from "lucide-react"

import { Field, FieldLabel } from "@/components/ui/field"

Button Group

Um Buttons zu einer Eingabe hinzuzufügen, verwende die Komponente ButtonGroup. Weitere Beispiele findest du bei der Komponente Button Group.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

Formular

Ein vollständiges Formularbeispiel mit mehreren Eingaben, einem Select und einem Button.

import { Button } from "@/components/ui/button"
import {
  Field,

RTL

Um RTL-Unterstützung in Neobrutalism zu aktivieren, sieh dir die RTL-Konfigurationsanleitung an.

"use client"

import * as React from "react"

Barrierefreiheit

Input rendert ein natives <input> – Tastaturbearbeitung, Fokus und Formularversand brauchen also keinerlei ARIA-Verdrahtung. Der Rest liegt bei dir:

Beschrifte jedes Input. Kombiniere es mit FieldLabel (oder einem <label htmlFor>) – ein placeholder ist kein Label; er verschwindet beim Tippen und wird nicht zuverlässig vorgelesen.
Verknüpfe Fehlertexte. Setze aria-invalid auf dem Input und lass aria-describedby auf die id deines FieldError oder FieldDescription zeigen, damit Screenreader die Meldung zusammen mit dem Feld vorlesen.
Wähle type und autocomplete passend. type="email" plus autocomplete="email" liefert die richtige mobile Tastatur und das richtige Autofill.