Formulare

Pflichtfelder mit *, Hilfe unter dem Feld, Fehler inline mit aria-invalid.

Field / Label

shadcn/ui · field + label

Import

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

Verwendung

Input

shadcn/ui · input

Default

Gefüllt

Fehler

Readonly / Disabled

Import

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

Verwendung

40 px, Radius 8, Padding 6/8/6/12, #FDFDFD, Kontur 1 px rgba(6,3,20,.50) (≥3:1).
Hover Kontur .71, Fokus 1 px Blau + 2-px-Akzent 16 % auf #F7F7F7; Fehler bleibt beim Fokus rot.
Readonly: durchgezogene neutrale Kontur auf Grau, fokussierbar für Auswahl/Kopie.
Placeholder nur als Beispiel, nie als Label.

Input Group

shadcn/ui · input-group

@immo24

0/500

Import

import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"

Verwendung

Prefix/Suffix-Icons, Text und Buttons im gemeinsamen Rahmen.
Nur der Außenrahmen besitzt den Fokus; innere Buttons zeigen Fokus als Füllung, keinen zweiten Ring.
Inneres Feld erbt die Gruppenhöhe (40 / Filter 36 / mobil 44).

Einheiten-Eingaben (€ / % / m²)

Komposition

Import

import { UnitInput } from "@/components/compositions/unit-input"

Basis: input-group

Verwendung

Textarea

shadcn/ui · textarea

Readonly: Übergabeprotokoll vom 01.10.

Import

import { Textarea } from "@/components/ui/textarea"

Verwendung

Formularrezept: Einheit anlegen

Komposition

Offizielles shadcn-Rezept (Field + React Hook Form + Zod). Validiert beim Absenden, danach live.

Import

import { einheitSchema } from "@/lib/validation/einheit"

Basis: field, react-hook-form Controller, zod, input-group, select, checkbox, switch

Verwendung