Beer CSS

Installation

npm

npm i @sjsf-lab/beercss-theme

pnpm

pnpm add @sjsf-lab/beercss-theme

yarn

yarn add @sjsf-lab/beercss-theme

bun

bun add @sjsf-lab/beercss-theme

deno

deno add @sjsf-lab/beercss-theme

Required peer dependencies: @sjsf/form@3.5.0 beercss@4.0.0 svelte@5.34.8

Configuration

Import the Beer CSS stylesheet:

import "beercss/dist/cdn/beer.css";

Extra widgets

You can connect extra widgets using the following include imports:

Note

For a widget to be applied, it must be explicitly specified in the UI schema or used in the field as the default widget.

// Used by default in the following fields: multiEnumField
import "@sjsf-lab/beercss-theme/extra-widgets/checkboxes-include"
import "@sjsf-lab/beercss-theme/extra-widgets/date-picker-include"
// Used by default in the following fields: fileField, filesField, arrayFilesField, nativeFileField, nativeFilesField, arrayNativeFilesField
import "@sjsf-lab/beercss-theme/extra-widgets/file-include"
import "@sjsf-lab/beercss-theme/extra-widgets/radio-include"
import "@sjsf-lab/beercss-theme/extra-widgets/range-include"
import "@sjsf-lab/beercss-theme/extra-widgets/switch-include"
import "@sjsf-lab/beercss-theme/extra-widgets/textarea-include"

Widgets demo

Form

JSON Schema

{
  "type": "object",
  "properties": {
    "checkbox": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      },
      "required": [
        "default"
      ]
    },
    "checkboxes": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "enum": [
              "foo",
              "bar",
              "fuzz",
              "qux"
            ]
          },
          "uniqueItems": true
        }
      },
      "required": [
        "default"
      ]
    },
    "file": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "format": "data-url"
        },
        "error": {
          "type": "string",
          "format": "data-url"
        }
      },
      "required": [
        "default"
      ]
    },
    "multiFile": {
      "type": "object",
      "properties": {
        "default": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        },
        "error": {
          "type": "array",
          "items": {
            "type": "string",
            "format": "data-url"
          }
        }
      },
      "required": [
        "default"
      ]
    },
    "number": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      },
      "required": [
        "default"
      ]
    },
    "select": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "text": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "datePicker": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    },
    "radio": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        },
        "error": {
          "type": "string",
          "enum": [
            "foo",
            "bar",
            "fuzz",
            "qux"
          ]
        }
      },
      "required": [
        "default"
      ]
    },
    "range": {
      "type": "object",
      "properties": {
        "default": {
          "type": "number"
        },
        "error": {
          "type": "number"
        }
      },
      "required": [
        "default"
      ]
    },
    "switch": {
      "type": "object",
      "properties": {
        "default": {
          "type": "boolean"
        },
        "error": {
          "type": "boolean"
        }
      },
      "required": [
        "default"
      ]
    },
    "textarea": {
      "type": "object",
      "properties": {
        "default": {
          "type": "string"
        },
        "error": {
          "type": "string"
        }
      },
      "required": [
        "default"
      ]
    }
  }
}

UI Schema

{
  "checkbox": {
    "default": {
      "ui:options": {
        "title": "checkbox"
      }
    },
    "error": {
      "ui:options": {
        "title": "checkbox"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "checkboxes": {
    "default": {
      "ui:components": {
        "arrayField": "multiEnumField"
      },
      "ui:options": {
        "title": "checkboxes"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "multiEnumField"
      },
      "ui:options": {
        "title": "checkboxes"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "file": {
    "default": {
      "ui:components": {
        "stringField": "fileField"
      },
      "ui:options": {
        "title": "file"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "fileField"
      },
      "ui:options": {
        "title": "file"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "multiFile": {
    "default": {
      "ui:components": {
        "arrayField": "arrayFilesField"
      },
      "ui:options": {
        "title": "multiFile"
      }
    },
    "error": {
      "ui:components": {
        "arrayField": "arrayFilesField"
      },
      "ui:options": {
        "title": "multiFile"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "number": {
    "default": {
      "ui:options": {
        "title": "number"
      }
    },
    "error": {
      "ui:options": {
        "title": "number"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "select": {
    "default": {
      "ui:components": {
        "stringField": "enumField"
      },
      "ui:options": {
        "title": "select"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField"
      },
      "ui:options": {
        "title": "select"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "text": {
    "default": {
      "ui:options": {
        "title": "text"
      }
    },
    "error": {
      "ui:options": {
        "title": "text"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "datePicker": {
    "default": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "title": "datePicker"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "datePickerWidget"
      },
      "ui:options": {
        "title": "datePicker"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "radio": {
    "default": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radio"
      }
    },
    "error": {
      "ui:components": {
        "stringField": "enumField",
        "selectWidget": "radioWidget"
      },
      "ui:options": {
        "useLabel": false,
        "title": "radio"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "range": {
    "default": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "title": "range"
      }
    },
    "error": {
      "ui:components": {
        "numberWidget": "rangeWidget"
      },
      "ui:options": {
        "title": "range"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "switch": {
    "default": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      },
      "ui:options": {
        "title": "switch"
      }
    },
    "error": {
      "ui:components": {
        "checkboxWidget": "switchWidget"
      },
      "ui:options": {
        "title": "switch"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  },
  "textarea": {
    "default": {
      "ui:components": {
        "textWidget": "textareaWidget"
      },
      "ui:options": {
        "title": "textarea"
      }
    },
    "error": {
      "ui:components": {
        "textWidget": "textareaWidget"
      },
      "ui:options": {
        "title": "textarea"
      }
    },
    "ui:options": {
      "layouts": {
        "object-properties": {
          "style": "display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;"
        }
      }
    }
  }
}

Supported validation events

checkbox	oninput, onchange, onblur
checkboxes
file	onchange, onblur
multiFile	onchange, onblur
number	oninput, onchange, onblur
select	oninput, onchange, onblur
text	oninput, onchange, onblur
datePicker	oninput, onchange, onblur
radio
range	oninput, onchange, onblur
switch	oninput, onchange, onblur
textarea	oninput, onchange, onblur

UI options

import type { ButtonType, LayoutType } from "@sjsf/form/fields/components";
import type {
  HTMLAttributes,
  HTMLButtonAttributes,
  HTMLFormAttributes,
  HTMLInputAttributes,
  HTMLOutputAttributes,
  HTMLLabelAttributes,
  HTMLSelectAttributes,
  HTMLTextareaAttributes,
} from "svelte/elements";

export interface UiOptions {
  /**
   * Overrides the attributes of any button component.
   */
  button?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of a button with a specific type.
   * This override takes precedence over the `button` override, but does not replace it.
   */
  buttons?: {
    [B in ButtonType]?: HTMLButtonAttributes;
  };
  /**
   * Overrides the attributes of the errors list.
   */
  errorsList?: HTMLAttributes<HTMLUListElement>;

  form?: HTMLFormAttributes;
  /**
   * Overrides the attributes of the field label.
   */
  labelAttributes?: HTMLLabelAttributes;
  /**
   * Overrides the attributes of any layout component.
   */
  layout?: HTMLAttributes<HTMLDivElement>;
  /**
   * Overrides the attributes of a layout with a specific type.
   * This override takes precedence over the `layout` override, but does not replace it.
   */
  layouts?: {
    [L in LayoutType]?: HTMLAttributes<HTMLDivElement>;
  };
  submitButton?: HTMLButtonAttributes;
  /**
   * Overrides the attributes of the field title
   */
  titleAttributes?: HTMLAttributes<HTMLDivElement>;

  checkbox?: HTMLInputAttributes;

  number?: HTMLInputAttributes;

  select?: HTMLSelectAttributes;

  text?: HTMLInputAttributes;

  checkboxes?: HTMLInputAttributes;

  datePicker?: HTMLInputAttributes;

  file?: HTMLInputAttributes;

  radio?: HTMLInputAttributes;

  range?: HTMLInputAttributes;

  switch?: HTMLInputAttributes;

  textarea?: HTMLTextareaAttributes;

  /**
   * Overrides the attributes of the switch widget container.
   */
  beercssSwitch?: HTMLInputAttributes;
  /**
   * Overrides the attributes of the description component.
   */
  beercssDescription?: HTMLAttributes<HTMLElement>;
  /**
   * Overrides the attributes of the help component.
   */
  beercssHelp?: HTMLOutputAttributes;
  /**
   * Overrides the attributes of the layout nav wrapper.
   */
  beercssNav?: HTMLAttributes<HTMLElement>;
  /**
   * Overrides the attributes of the checkboxes container.
   */
  beercssCheckboxesContainer?: HTMLAttributes<HTMLElement>;
  /**
   * Overrides the attributes of the radio container.
   */
  beercssRadioContainer?: HTMLAttributes<HTMLElement>;
}