---
group: Widgets
title: Overview
weight: 0
---
Widgets define the data type and interface for entry fields. Static CMS comes with several built-in widgets. Click the widget names in the sidebar to jump to specific widget details. You can also [create your own](/docs/custom-widgets)!
Widgets are specified as collection fields in the Static CMS `config` file. Note that [YAML syntax](https://en.wikipedia.org/wiki/YAML#Basic_components) allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.
To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site](https://static-static-cms-demo.netlify.app). (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code](https://github.com/StaticJsCMS/static-cms/blob/main/dev-test/config.yml) to see how each field was configured.
## Available Widgets
| Name | Description |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| [Boolean](/docs/widget-boolean) | The boolean widget translates a toggle switch input to a true or false value |
| [Code](/docs/widget-code) | The code widget provides a code editor (powered by Codemirror) with optional syntax awareness |
| [Color](/docs/widget-color) | The color widget translates a color picker to a color string |
| [Datetime](/docs/widget-datetime) | The datetime widget translates a datetime picker to a datetime string |
| [File](/docs/widget-file) | The file widget allows editors to upload a file or select an existing one from the media library |
| [Hidden](/docs/widget-hidden) | Hidden widgets do not display in the UI |
| [Image](/docs/widget-image) | The file widget allows editors to upload a file or select an existing one from the media library |
| [List](/docs/widget-list) | The list widget allows you to create a repeatable item in the UI which saves as a list of widget values |
| [Map](/docs/widget-map) | The map widget allows you to edit spatial data using an interactive map |
| [Markdown](/docs/widget-markdown) | The markdown widget provides a full fledged text editor allowing users to format text with features such as headings and blockquotes |
| [Number](/docs/widget-number) | The number widget uses an HTML number input |
| [Object](/docs/widget-object) | The object widget allows you to group multiple widgets together, nested under a single field |
| [Relation](/docs/widget-relation) | The relation widget allows you to reference items from another collection |
| [Select](/docs/widget-select) | The select widget allows you to pick a string value from a dropdown menu |
| [String](/docs/widget-string) | The string widget translates a basic text input to a string value |
| [Text](/docs/widget-text) | The text widget takes a multiline text field and saves it as a string |
## Common widget options
The following options are available on all fields:
| Name | Type | Default | Description |
| -------- | ----------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | string | | The name of the field |
| widget | string | `'string'` | _Optional_. The type of widget to render for the field |
| label | string | `name` | _Optional_. The display name of the field |
| required | boolean | `true` | _Optional_. Specify as `false` to make a field optional |
| hint | string | | _Optional_. Adds helper text directly below a widget. Useful for including instructions. Accepts markdown for bold, italic, strikethrough, and links. |
| pattern | string | | _Optional_. Adds field validation by specifying a list with a [regex pattern](https://regexr.com/) and an error message; more extensive validation can be achieved with [custom widgets](/docs/custom-widgets/#advanced-field-validation) |
| i18n | boolean
\|'translate'
\|'duplicate'
\|'none' | | _Optional_. 
- `translate` - Allows translation of the field
- `duplicate` - Duplicates the value from the default locale
- `true` - Accept parent values as default
- `none` or `false` - Exclude field from translations
|
| comment | string | | _Optional_. Adds comment before the field (only supported for yaml) |
### Example
```yaml
name: title
label: Title
widget: string
pattern: ['.{12,}', 'Must have at least 12 characters']
```
```js
name: 'title',
label: 'Title',
widget: 'string',
pattern: ['.{12,}', 'Must have at least 12 characters'],
```