Header

Displays a section heading with an optional description. Useful for organizing pages into clearly labeled sections.

ctx.ui.display.header({ level, title, description });

Config

The visual level of the header. Affects the font size and visual hierarchy. Level 1 is the largest, 3 is the smallest.

The main title text of the header.

Optional description text shown below the title, useful for providing context or additional explanation.

Usage

Use headers to break up long forms or group elements under a common theme.

ctx.ui.page({
  title: "Profile setup",
  content: [
    ctx.ui.display.header({
      level: 1,
      title: "Basic Information",
      description: "Tell us about yourself.",
    }),
    ctx.ui.inputs.text("name", { label: "Full name" }),
    ctx.ui.inputs.text("email", { label: "Email address" }),
  ],
});