Field

Native inputs with Porchlight field chrome: stacked and inline labels, hints, validation, disabled/read-only states, selects, textareas, and grouped prefixes or suffixes.

Primitive controls

Workspace name Use a name your team recognizes. Billing email Invoices and receipts are sent here. Plan Native select, themed with the field control. Internal notes Textarea uses the same field surface.

Messages

Storage limit This workspace is close to its storage limit.

Backup email Email verified.

Project slug Use lowercase letters, numbers, and hyphens. Changing this updates future invite links. Spaces are not allowed.

Inline labels

Region Inline labels make dense settings easier to scan. Retention Stacks automatically on narrow screens.

Hidden label search

Input groups

Workspace URL

.porchlight.app

Suffix text is visual chrome; the input stays native.

Monthly budget

Prefix and number input share one focus ring.

Invite teammate

Action groups use explicit labels, not wrapper labels.

States

Email Focus me to see the accent ring. Workspace URL Type invalid text and blur to trigger validation.

Server validation That email is already invited.

Valid server state Explicit false invalid state stays neutral.

Grouped server validation

.porchlight.app

Use lowercase letters, numbers, and hyphens.

Read-only key Read-only values can still be copied. Disabled key Disabled controls are muted and skipped.

Framework-neutral rendering

Fragment email This field can be replaced by any server or framework that emits the same HTML.