hb-input-select

Description

Native <select> bound to schemaentry options from params.options (each option has id, value, and optional label). Supports JSON string or object schemaentry, optional required state, and show_validation for Bulma validation styling on the wrapper (select.is-success / select.is-danger) plus a validationTip shown as help is-danger. Dispatches setVal with { value, valid, id } on every change. Use is_small="yes" for Bulma select.is-small (compact control, e.g. next to hb-paginate).

Styling (Bulma)

The component bundles Bulma 1.x form styles (form/shared, form/select, form/tools) scoped to the shadow root, with theme defaults on :host (--bulma-hb-def-*). To align with the rest of the app, set public --bulma-* variables on body or :root; they inherit onto the custom element host.

Markup pattern:

• Wrapper: div.select around the native <select> (Bulma arrow and control height).
• Validation: is-success / is-danger modifiers on div.select when show_validation === "yes" and schemaentry.required is set.
• Help text: p.help.is-danger with part="invalid-feedback" for theming (only when show_validation === "yes" and the value is invalid).
• schemaentry.readonly maps to the native disabled attribute on <select> (HTML does not support readonly on selects).

Types

export type FormSchemaEntry = {
  /**
   * This will be both the key of the object when submitting the form's data,
   * and also the id in the DOM.
   */
  id: string;

  /**
   * The descriptive label that will show alongside the form control.
   */
  label?: string;

  /**
   * Optional default value.
   */
  value?: string | number | boolean;

  /** When true, the native `<select>` is `disabled` (HTML has no `readonly` on `<select>`). */
  readonly?: boolean;

  /**
   * This doesn't matter if the dependencies requirements aren't met.
   */
  required?: boolean;

  validationRegex?: string;
  /**
   * Shows if value is not valid.
   */
  validationTip?: string;

  placeholder?: string;

  /**
   * Other parameters that may be specific to a certain kind of form control.
   */
  params?: Record<string, any>;
};

export type Component = {
  id?: string;
  style?: string;

  show_validation?: "yes" | "no";
  is_small?: "yes" | "no";
  schemaentry: FormSchemaEntry | undefined;
};

export type Events = {
  setVal: { value: string; valid: boolean; id: string };
};