Gutenberg block editor – list of form components for custom blocks

I’m trying to learn how to create blocks for the block editor. I can’t seem to find a list of form elements to add. For example, I need a toggle switch, dropdown, etc.

I found THIS toggle, but I’m not sure how to use it and can’t find any examples.

Here is my code, so far I have been able to add PlainText, RichText and MediaUpload. Is there a list of these somewhere? More examples?

const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;

import './style.scss';
import './editor.scss';

registerBlockType('card-block/main', {
    title: 'Slider',
    icon: 'images-alt2',
    category: 'common',
    attributes: {
        title: {
            source: 'text',
            selector: '.slider__title'
        },
        body: {
            type: 'array',
            source: 'children',
            selector: '.slider__body'
        },
        imageAlt: {
            attribute: 'alt',
            selector: '.slider__image'
        },
        imageUrl: {
            attribute: 'src',
            selector: '.slider__image'
        }
    },

    edit({ attributes, className, setAttributes }) {
        const getImageButton = (openEvent) => {
            if (attributes.imageUrl) {
                return (
                    <img
                        src={attributes.imageUrl}
                        onClick={openEvent}
                        className="image"
                    />
                );
            }
            else {
                return (
                    <div className="button-container">
                        <Button
                            onClick={openEvent}
                            className="button button-large"
                        >
                            Pick an Image
                        </Button>
                    </div>
                );
            }
        };

        return(
            <div className="container">
                <MediaUpload
                    onSelect={media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); }}
                    type="image"
                    value={attributes.imageID}
                    render={({ open }) => getImageButton(open)}
                />
                <PlainText
                    onChange={content => setAttributes({ title: content })}
                    value={attributes.title}
                    placeholder="Your card title"
                    className="heading"
                />
                <RichText
                    onChange={content => setAttributes({ body: content })}
                    value={attributes.body}
                    multiline="p"
                    placeholder="Your card text"
                />
            </div>
        );
    },

    save({ attributes }) {
        const cardImage = (src, alt) => {
            if (!src) return null;

            if (alt) {
                return (
                    <img
                        className="slider__image"
                        src={src}
                        alt={alt}
                    />
                );
            }

            return (
                <img
                    className="slider__image"
                    src={src}
                    alt=""
                    aria-hidden="true"
                />
            );
        };

        return (
            <div className="card">
                {cardImage(attributes.imageUrl, attributes.imageAlt)}
                <div className="slider__content">
                    <h3 className="slider__title">{attributes.title}</h3>
                    <div className="slider__body">
                        {attributes.body}
                    </div>
                </div>
            </div>
        );
    }
});

Any help would be greatly appreciated! I am picking up ES6 & JSX as well so this has been a pain!

There are two main packages that provide components which can be used inside the blocks API or the plugins API (to create your own blocks or plugins).

The components found in the wp.components package can be used to manipulate data. This data could be the attributes from a block or the data from your custom store or one of the default stores. They can actually be used outside of the block editor.

The components found in the wp.editor package are meant to be used inside the editor to manipulate it. They are used internally by the block editor itself or core blocks and can be used in your own blocks as well. These components make use of the block editor data stores so they have to be used inside it. Currently, the block editor can only be loaded inside the post editor but this is something that will probably change soon.