Tabs

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

TabList API

interface TabListProps {
  /**
   * A tab list can supports 'transparent' and 'subtle' appearance.
   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
   * - 'transparent': No background and border styling
   * - 'subtle-circular': Adds background and border styling
   * - 'filled-circular': Adds background styling
   * - 'elevated': Adds background around all tabs for visual grouping
   *
   * The appearance affects each of the contained tabs.
   * @default 'transparent'
   */
  appearance?: "subtle" | "transparent" | "elevated" | "subtle-circular" | "filled-circular";

  as?: "div";

  children?: any;

  className?: string;

  /**
   * The value of the tab to be selected by default.
   * Typically useful when the selectedValue is uncontrolled.
   */
  defaultSelectedValue?: unknown;

  /**
   * A tab list can be set to disable interaction.
   * @default false
   */
  disabled?: boolean;

  /**
   * Raised when a tab is selected.
   */
  onTabSelect?: SelectTabEventHandler;

  ref?: Ref<HTMLDivElement>;

  /**
   * Tab size may change between unselected and selected states.
   * The default scenario is a selected tab has bold text.
   *
   * When true, this property requests tabs be the same size whether unselected or selected.
   * @default true
   */
  reserveSelectedTabSpace?: boolean;

  /**
   * The value of the currently selected tab.
   */
  selectedValue?: unknown;

  /**
   * When true, focusing a tab will select it.
   * @default false
   */
  selectTabOnFocus?: boolean;

  /**
   * A tab list can be either 'small', 'medium', or 'large' size.
   * The size affects each of the contained tabs.
   * @default 'medium'
   */
  size?: "small" | "medium" | "large";

  style?: CSSProperties;

  /**
   * A tab list can arrange its tabs vertically.
   * @default false
   */
  vertical?: boolean;
}

Tab API

A tab provides a selectable item in a tab list.

interface TabProps {
  as?: "button";

  children?: any;

  className?: string;

  /**
   * Component children are placed in this slot
   * Avoid using the `children` property in this slot in favour of Component children whenever possible.
   */
  content?: NonNullable<WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  /**
   * A tab can be set to disable interaction.
   * @default false
   */
  disabled?: boolean;

  /**
   * Icon that renders before the content.
   */
  icon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  ref?: Ref<HTMLButtonElement>;

  style?: CSSProperties;

  /**
   * The value that identifies this tab when selected.
   */
  value: unknown;
}