Select one

A single-select dropdown or radio group input. Supports strings, numbers, booleans, or dates as option values.

ctx.ui.select.one("name", config);

Config

The name of the input. This will be the key in the result object.

The label of the input. If this is not provided, the name will be used as the label.

The help text of the input.

Whether the input is optional. Inputs are required by default.

Whether the input is disabled.

The default selected value.

The list of selectable options. Each option can be a primitive (string, number, boolean, or Date), or an object with label and value fields. If only a primitive is provided, it will be used as both the value and label.

Custom validation function. Return true if valid, or a string with an error message if invalid.

Usage

Elements are rendered by adding them to a page. A page that contains select elements will return an object with keys matching the name of each input.

const result = await ctx.ui.page({
  title: "Select one input",
  content: [
    ctx.ui.select.one("favouriteFruit", {
      label: "Favourite fruit",
      options: ["Apple", "Banana", "Mango"],
    }),
    ctx.ui.select.one("userRole", {
      label: "User role",
      options: [
        { label: "Administrator", value: "admin" },
        { label: "Editor", value: "editor" },
        { label: "Viewer", value: "viewer" },
      ],
      defaultValue: "editor",
    }),
  ],
});
 
console.log(result.favouriteFruit);
console.log(result.userRole);