---
title: Common components
editUrl: https://github.com/Cratis/Components/edit/main/Documentation/Common/index.md
description: Choose among the native form controls, pickers, collection controls, layout, icons, and error handling in @cratis/components/Common.
---


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`:

```tsx
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](/components/common/cratis-components-provider/).

When the value belongs to an Arc command, use the matching [CommandForm field](/components/commandform/) 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](/components/common/basic-controls/) |
| Enter a number with locale separators, fraction rules, bounds, or a nullable value | `NumberInput` | [Locale-aware number input](/components/common/number-input/) |
| Enter a date or a date and time | `DatePickerInput` | [DatePickerInput](/components/common/date-picker-input/) |
| Put an icon addon in front of your own input | `FormElement` | [FormElement](/components/common/form-element/) |

## Choose from options

| You want to… | Use | Reference |
| --- | --- | --- |
| Turn one option on or off | `Checkbox` or `Switch` | [Basic controls](/components/common/basic-controls/) |
| Pick one of a few options that are all visible | `Radio`, or `ToggleGroup` for a segmented control | [Basic controls](/components/common/basic-controls/), [Collection controls](/components/common/collection-controls/) |
| Pick one entity by typing to search, with loading, empty, failure and add-new states | `ComboBox` | [ComboBox](/components/common/combobox/) |
| Pick one or more values from a known, small list | `Dropdown` (separate subpath) | [Dropdown](/components/dropdown/) |
| Edit a set of values as removable tags | `TagGroup` | [Collection controls](/components/common/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](/components/common/basic-controls/) |
| Show a row of page-level command actions | `ActionMenubar` | [ActionMenubar](/components/common/action-menubar/) |
| Switch between views of the same content | `Tabs` | [Collection controls](/components/common/collection-controls/) |
| Show where the user is in a hierarchy | `Breadcrumbs` | [Collection controls](/components/common/collection-controls/) |
| Give a routed view a full-height layout and title | `Page` | [Page](/components/common/page/) |
| Group content in a bounded `div`, `section`, or `article` | `Surface` | [Basic controls](/components/common/basic-controls/) |
| Show a short hint on hover and keyboard focus of one element | `Tooltip` | [Tooltips](/components/common/basic-controls/#tooltips) |

## Icons, configuration, and errors

| You want to… | Use | Reference |
| --- | --- | --- |
| Pass an icon as a React node or icon-font class | `Icon`, `IconDisplay` | [Icon](/components/common/icon/) |
| Set the locale, owned labels, icons, or the app-wide toaster | `CratisComponentsProvider` | [CratisComponentsProvider](/components/common/cratis-components-provider/) |
| Stop a render failure from taking down the whole screen | `ErrorBoundary` | [ErrorBoundary](/components/common/error-boundary/) |

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