Proposed CSC Standards

Component standards

A handbook for each control. Follow the element, color, and behavior in your own application. The preview shows the component the rules describe.

ButtonsRules for actions: submit, confirm, open a dialog, or run a command. Navigation to another page stays a link.20 rules Text inputsSingle-line fields with a visible label, hint, and error text.6 rules Select controlsChoose one office or similar known value.4 rules Dialogs and modalsA modal dialog for a short decision or a focused edit.6 rules SidebarsApplication navigation along the side of an internal tool.5 rules Navigation barsA top bar for public or compact destinations.4 rules BreadcrumbsThe path from the home of a section to the current page.3 rulesCardsA surface that groups a title, value, and actions.3 rules

Demonstration data only.


	Sample Applicant A	CSC-24081	Central Office	Approved
	Sample Applicant B	CSC-24082	NCR	Pending
	Sample Applicant C	CSC-24083	Region VII	Approved
	Sample Applicant D	CSC-24084	CAR	Review
	Sample Applicant E	CSC-24085	BARMM	Pending

Data tablesRows of records with sort, selection, empty, and loading behavior.7 rules TabsSwitch a panel inside the same page.3 rules Badges and statusesA short status word with a tone.3 rules AlertsA persistent message about the current page or form.3 rules Toast notificationsA short confirmation that can leave the screen.3 rules Dropdown menusA menu of actions opened from a button.3 rules AccordionsA disclosure that shows and hides a section.3 rules PaginationMove between pages of a bounded list.3 rules Step indicatorsProgress through a known sequence.3 rules File uploadersChoose or drop a file.4 rules Date pickersA single date or a start and end date.3 rules Dashboard shellsThe four application frames: classic, compact, floating, and public.3 rules ChartsA bar or line chart with a text alternative.3 rules Application formThe multi-step application wizard.4 rules