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 nameUse a name your team recognizes.Billing emailInvoices and receipts are sent here.PlanNative select, themed with the field control.Internal notesTextarea uses the same field surface.

Customizable native select

Opt-in themed options with native keyboard selection and form behavior.

Messages

Storage limitThis workspace is close to its storage limit.

Backup emailEmail verified.

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

Inline labels

RegionInline labels make dense settings easier to scan.RetentionStacks automatically on narrow screens.

Hidden label search

Standalone controls

Controls keep their styling when a toolbar or dialog owns the layout.

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

EmailFocus me to see the accent ring.Workspace URLType invalid text and blur to trigger validation.

Server validationThat email is already invited.

Valid server stateExplicit false invalid state stays neutral.

Grouped server validation

.porchlight.app

Use lowercase letters, numbers, and hyphens.

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

Framework-neutral rendering

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