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

Param	Example	Type	Status
`type`	`type: "select"`	"select"	Required
`options`	`options: [{ 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" },
          ],
        },
      },
      // ...
    },
  },
};

Radio Text