Pages

Finished interfaces that test how components work together.

Filtered table

A filter bar, a scrolling table and pagination make one data view.

12 records

FieldTypeStateSize
NameTextReady14
DescriptionTextReview64
Recipe markup

Build order

  1. Define the columns and the table caption.
  2. Add only filters that change this record set.
  3. Keep filters when moving between pages.

Parts

Filter barData tableTagPagination

List and details

The main panel handles selection. The linked panel shows the one selected record.

Fields

Select a row

NameState
First fieldReady
Second fieldReview
Recipe markup

Build order

  1. Make the list useful without the details panel.
  2. Tie the details heading to the selected row.
  3. On a narrow screen, show the details after a tap without repeating the record fields.
  4. After a delete, return focus to the list.

Parts

WorkspaceData tableDescription list

Validated form

Errors stay next to their fields. One notice explains the form result.

3 to 40 characters.

Use Latin letters and hyphens.

Recipe markup

Build order

  1. Validate a field after input or submit.
  2. Link the error to its control.
  3. State the number of errors in the summary message.

Parts

FieldNoticeButton