FastStore Integrating your storefront with Headless CMS

Widgets for Headless CMS

A widget is a graphical element that provides a particular way for editors to interact and upload content via the Headless CMS.

Widgets may include date selectors, pull-down menus, buttons, selection boxes, progress indicators, and many other devices for displaying information andinviting, accepting, and responding to user actions.

The list below shows the widgets you can use to integrate your storefront project with the VTEX Headless CMS Admin.

Name	Description	Implementation reference	Interface
`Checkbox`	Checkbox.	`@material-ui/core/FormControlLabel`	${"base64":" ","img":{"width":600,"height":300,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2515,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/Checkbox___cea741ccd6cca6538ae6b700feec9b13.png"}}$
`DateTime`	Calendar popup for selecting a single date and time.	VTEX Styleguide	${"base64":" ","img":{"width":600,"height":256,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":17993,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/calendar___efa4e58e58e8869921237778f1aec6bc.png"}}$
`ImageUploader`	Image uploader for uploading or selecting an existing image from the media library..	`react-resize-detector`, `react-dropzone`	${"base64":" ","img":{"width":600,"height":245,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":54242,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/ImageUploader___ccaebbaf4c3892e7ddd8ed0ea16da51d.png"}}$
`RichText`	Rich text editor based on the `draft-js` library.	Draft.js	${"base64":" ","img":{"width":600,"height":193,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":49811,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/RichText___826b9e3ef1959c3fb33e4b5f437e9a5a.png"}}$
`Select`	List of options to select.	`@material-ui/core/MenuItem`	${"base64":" ","img":{"width":600,"height":149,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":39825,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/Select___b887b32d674f4ab96abedc9da1a37716.png"}}$
`Text`	Input text editor.	`@material-ui/core/InputLabel`, `@material-ui/core/FormHelperText`	${"base64":" ","img":{"width":600,"height":144,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":18748,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/Text___7c1bca50c56ae574865416d43a0e607a.png"}}$