Common components

The Common subpath holds the building blocks that work with ordinary React state and need no Arc command binding. Import them from @cratis/components/Common:

import { Button, ComboBox, DatePickerInput, TextInput } from '@cratis/components/Common';

CratisComponentsProvider is also re-exported here, but the conventional import is the package root, @cratis/components. Mount it once at the application root to supply the locale and Components-owned labels; see CratisComponentsProvider.

When the value belongs to an Arc command, use the matching CommandForm field instead of wiring a Common control to the command yourself.

Enter a value

You want to…	Use	Reference
Enter free text on one or several lines	TextInput, TextArea	Basic controls
Enter a number with locale separators, fraction rules, bounds, or a nullable value	NumberInput	Locale-aware number input
Enter a date or a date and time	DatePickerInput	DatePickerInput
Put an icon addon in front of your own input	FormElement	FormElement

Choose from options

You want to…	Use	Reference
Turn one option on or off	Checkbox or Switch	Basic controls
Pick one of a few options that are all visible	Radio, or ToggleGroup for a segmented control	Basic controls, Collection controls
Pick one entity by typing to search, with loading, empty, failure and add-new states	ComboBox	ComboBox
Pick one or more values from a known, small list	Dropdown (separate subpath)	Dropdown
Edit a set of values as removable tags	TagGroup	Collection controls

Act, navigate, and lay out

You want to…	Use	Reference
Run one action	Button, or IconButton for an icon-only action	Basic controls
Show a row of page-level command actions	ActionMenubar	ActionMenubar
Switch between views of the same content	Tabs	Collection controls
Show where the user is in a hierarchy	Breadcrumbs	Collection controls
Give a routed view a full-height layout and title	Page	Page
Group content in a bounded div, section, or article	Surface	Basic controls
Show a short hint on hover and keyboard focus of one element	Tooltip	Tooltips

Icons, configuration, and errors

You want to…	Use	Reference
Pass an icon as a React node or icon-font class	Icon, IconDisplay	Icon
Set the locale, owned labels, icons, or the app-wide toaster	CratisComponentsProvider	CratisComponentsProvider
Stop a render failure from taking down the whole screen	ErrorBoundary	ErrorBoundary

Modal content, confirmations, and busy states are in the separate Dialogs subpath. For choices that span several subpaths, such as a table versus a data page, see Choosing a component. To restyle any of these controls, start with the Styling overview.