Skip to content

STUDIO / DATA OPERATIONS

Record workflows

Search, filters, navigation, settings and content states built on semantic HTML.

COPY HTML RECIPES

Search and filters

SERVER-READY GET FORM

Illustrative static records. On a real product, a server must apply these query parameters, return matching results, and preserve the selected values.

CLEAR

Recent records

3 ILLUSTRATIVE RECORDS — NOT FILTERED
Sample records; the current page does not have a search backend.
RecordOwnerStatusValue
Orion PortalProductActive$5,400
Atlas APIPlatformReview$2,800
Nova DashboardProductActive$4,200

Pagination URLs are examples only. A server must return the corresponding page, count and current-page state.

Settings and disclosures

NATIVE HTML / NO SCRIPT
Display preferences

Compact density changes this example using CSS :has(). Email notification settings require an application backend. Neither is persisted.

Keyboard and screen-reader guidance

Use native form labels, status text, real links, keyboard-visible focus, descriptive table captions and meaningful error messages. Never use CSS alone to enforce permissions.

Empty state

Your server can render this section when a query has no matches.

No results match these filters.

CHANGE FILTERS

Loading state

The application must manage loading announcements and remove placeholders when complete.

These static decorative placeholders do not imply a network request.