Textfeld

Hier gibt es zwei Schichten. input() und textarea() sind die nackten Steuerelemente; textField() und textareaField() wickeln eines in Label, Hilfetext und Fehlermeldung und verbinden sie über for und aria-describedby. Greif zum Zweiten, außer du baust das Layout selbst.

Einfaches Textfeld

Name

textField({ label: 'Name', name: 'name', placeholder: 'Ada Lovelace' })

Hilfetext

Der Hilfetext ist über aria-describedby verknüpft, sodass ein Screenreader ihn als Teil des Feldes liest und nicht als losen Text dahinter.

E-Mail

Wir nutzen sie nur, um fehlgeschlagene Builds zu melden.

textField({
  label: 'E-Mail',
  name: 'email',
  type: 'email',
  help: 'Wir nutzen sie nur, um fehlgeschlagene Builds zu melden.',
})

Pflichtfeld und Fehler

Ein error markiert das Feld als ungültig, färbt den Rahmen, setzt aria-invalid und lässt aria-describedby auf die Meldung zeigen — eine Prop, alle vier Wirkungen.

Projekt

Website

Das ist keine URL.

stack({ gap: 'lg' },
  textField({ label: 'Projekt', name: 'project', required: true, value: '' }),
  textField({
    label: 'Website',
    name: 'site',
    error: 'Das ist keine URL.',
    value: 'sitelo punkt dev',
  }),
)

Größen

Klein

Mittel

Groß

stack({ gap: 'md' },
  textField({ label: 'Klein', name: 'small', size: 'sm', placeholder: 'sm' }),
  textField({ label: 'Mittel', name: 'medium', size: 'md', placeholder: 'md' }),
  textField({ label: 'Groß', name: 'large', size: 'lg', placeholder: 'lg' }),
)

Zierteile

Ein Präfix oder Suffix, direkt am Steuerelement, für Einheiten und feste Teile eines Werts.

Website

https://

Build-Zeitlimit

Sekunden

stack({ gap: 'md' },
  textField({ label: 'Website', name: 'url', startAdornment: 'https://', placeholder: 'example.com' }),
  textField({ label: 'Build-Zeitlimit', name: 'timeout', endAdornment: 'Sekunden', value: '30' }),
)

Deaktiviert und schreibgeschützt

Deaktiviert

Schreibgeschützt

stack({ gap: 'md' },
  textField({ label: 'Deaktiviert', name: 'disabled', value: 'Nicht bearbeitbar', disabled: true }),
  textField({ label: 'Schreibgeschützt', name: 'readonly', value: 'dist/', readonly: true }),
)

Mehrzeilig

textareaField() ist dasselbe Feld um ein <textarea> herum. Sein Wert ist Elementinhalt statt Attribut, worum sich die Komponente kümmert.

Beschreibung

Erscheint in Suchergebnissen und Social Cards.

textareaField({
  label: 'Beschreibung',
  name: 'description',
  rows: 4,
  help: 'Erscheint in Suchergebnissen und Social Cards.',
  value: 'Statische Website-Generierung ohne Konfiguration, angetrieben von Vite.',
})

In einem Formular

Name

E-Mail

Nachricht

card(
  cardBody(
    stack({ gap: 'md' },
      textField({ label: 'Name', name: 'contact-name', required: true }),
      textField({ label: 'E-Mail', name: 'contact-email', type: 'email', required: true }),
      textareaField({ label: 'Nachricht', name: 'message', rows: 3 }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ variant: 'ghost', color: 'neutral' }, 'Abbrechen'),
    button({ type: 'submit' }, 'Senden'),
  ),
)

Selbst bauen

field() ist die Hülle für sich — sie nimmt jedes Steuerelement als Kind, du kannst also zwei Eingaben in eine Reihe setzen oder ein Steuerelement verwenden, das diese Bibliothek nicht hat, unter derselben Label- und Fehlerbehandlung.

Ein Label kann nicht zwei Steuerelemente benennen, deshalb braucht hier jede Eingabe ihren eigenen zugänglichen Namen. Genau das tun die aria-label: das sichtbare Label benennt das Paar, und jede Eingabe sagt, welches Ende sie ist.

Zeitraum

Beide Enden zählen dazu.

field({ label: 'Zeitraum', help: 'Beide Enden zählen dazu.' },
  stack({ direction: 'row', gap: 'sm' },
    input({ type: 'date', name: 'from', 'aria-label': 'Von' }),
    input({ type: 'date', name: 'to', 'aria-label': 'Bis' }),
  ),
)

Props

textField und textareaField

Prop	Typ	Standard	Beschreibung
`label`	`Child`	—	Die Feldbeschriftung. Leitet ohne name auch die id des Steuerelements ab.
`name`	`string`	—	Name des Formularfelds; die id wird daraus abgeleitet.
`help`	`Child`	—	Hinweis unter dem Steuerelement, per aria-describedby verknüpft.
`error`	`Child \| false`	—	Fehlermeldung. Setzt außerdem aria-invalid am Steuerelement.
`required`	`boolean`	`false`	Markiert Label und Steuerelement.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Höhe des Steuerelements und Textgröße.
`type`	`string`	`'text'`	Jeder input-Typ. Nur bei textField.
`startAdornment`	`Child`	—	Präfix am Steuerelement. Nur bei textField.
`endAdornment`	`Child`	—	Suffix am Steuerelement. Nur bei textField.
`value`	`string \| number`	—	Startwert.
`fieldClass`	`string`	—	Klasse für die Hülle statt für das Steuerelement.

Die ids werden aus name abgeleitet — oder aus label, wenn es keinen name gibt — und nicht aus einem Zähler, sodass dieselbe Seite bei jedem Build dasselbe HTML ergibt. Übergib id, um das zu überschreiben.

field

Prop	Typ	Standard	Beschreibung
`label`	`Child`	—	Der Text der Beschriftung.
`help`	`Child`	—	Hinweis unter dem Steuerelement.
`error`	`Child \| false`	—	Fehlermeldung; fügt der Hülle außerdem den Ungültig-Zustand hinzu.
`required`	`boolean`	`false`	Fügt dem Label die Pflichtmarkierung hinzu.
`for`	`string`	—	id des beschrifteten Steuerelements.