Twenty building blocks for screens inside COHO. Each page shows the anatomy, every state in light and dark, when to use it, and the HTML to copy.
Actions
Form elements
Checkbox
Turn one option on or off, or pick several from a list.
View componentDate input
A date, using the browser date picker.
View componentField: label, hint and error
Every form control sits in a field: label, optional hint, the control, and an error when it is wrong.
View componentRadio
Pick exactly one option from a short list.
View componentSelect
Choose one option from a list of more than about five.
View componentText input
A single line of text, with its label above.
View componentTextarea
Several lines of text.
View componentFeedback
AI content
Marks text an AI drafted, so managers know to check it before it is used.
View componentEmpty state
What to show when there is nothing to show yet.
View componentInline alert
A message about the whole page or a section: information, success, a warning or an error.
View componentSpinner and skeleton
Show that something is loading.
View componentData display
Status tag
A short status label: Paid, Overdue, Draft.
View componentSummary list
Key and value pairs for one record, such as a property or tenancy.
View componentTable
Rows of data the user compares or scans.
View componentLayout
Card
A bordered box that groups related content, such as one tenancy or one setting group.
View componentPage header
The top of every app screen: the page title, an optional subtitle and the main action.
View componentStack and inline
Two layout helpers that space things consistently: stack (vertical) and inline (horizontal, wrapping).
View componentNavigation
Pagination
Move through a long list a page at a time.
View componentTabs
Switch between views of the same thing.
View component