Docs
API Reference
Fields
Select

Select

Render a select input with a list of options. Extends Base.

Interactive Demo
Example

Hello, world

const config = {
  components: {
    Example: {
      fields: {
        textAlign: {
          type: "select",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
        },
      },
      render: ({ textAlign }) => {
        return <p style={{ textAlign }}>Hello, world</p>;
      },
    },
  },
};

Params

ParamExampleTypeStatus
typetype: "select""select"Required
optionsoptions: [{ label: "Option 1", value: "option-1" }]Object[]Required

Required params

type

The type of the field. Must be "select" for Array fields.

const config = {
  components: {
    Example: {
      fields: {
        textAlign: {
          type: "select",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
        },
      },
      // ...
    },
  },
};

options

The options for the select field. The value can be a String, Number or Boolean.

const config = {
  components: {
    Example: {
      fields: {
        textAlign: {
          type: "select",
          options: [
            { label: "Left", value: "left" },
            { label: "Right", value: "right" },
          ],
        },
      },
      // ...
    },
  },
};
RadioText