Release Notes - August 2025

Enhancements

Formfields now render (native) validation messages

Back in January, we announced that <zui-input> would participate in native validation lifecycles provided by the native web platform.

With this release, we're enhancing <zui-formfield> to intercept these validation events and render inline validation messages for you.

<zui-formfield label="ZUI input">
  <zui-input
    name="zui-input"
    required=""
    minlength="2"
    validation-message-minlength="Please use at least 2 characters."
  ></zui-input>
</zui-formfield>

Select dropdown can now opt-in to hide empty option groups

We've introduced a new attribute, hide-empty-groups, to <zui-select-dropdown> that will hide option groups that are empty. This can be useful when a user selects all available options in a group, but the group's continued rendering appears confusing.

<zui-select-dropdown
  hide-empty-groups
  multiple
  searchable
  typeahead
  placeholder="Choose your top 3 restaurants..."
>
  <zui-option-group label="Milwaukee">
    <zui-option value="milwaukee-a">Restaurant A</zui-option>
    <zui-option value="milwaukee-b">Restaurant B</zui-option>
    <zui-option value="milwaukee-c">Restaurant C</zui-option>
  </zui-option-group>
  <zui-option-group label="Wauwatosa">
    <zui-option value="wauwatosa-a">Cafe A</zui-option>
    <zui-option value="wauwatosa-b">Cafe B</zui-option>
    <zui-option value="wauwatosa-c">Cafe C</zui-option>
  </zui-option-group>
  <zui-option-group label="Greenfield">
    <zui-option value="greenfield-a">Bistro A</zui-option>
    <zui-option value="greenfield-b">Bistro B</zui-option>
  </zui-option-group>
  <zui-option-group label="West Allis">
    <zui-option value="west-allis-a">Diner A</zui-option>
    <zui-option value="west-allis-b">Diner B</zui-option>
  </zui-option-group>
</zui-select-dropdown>

Bug fixes

Fixed an issue where trying to deselect all options requires clicking twice

There are scenarios when all options are selected in <zui-select-dropdown multiple enable-select-all> on page load. Despite all options being selected, including “Select all”, being checked in the UI, clicking “Select all” once doesn’t uncheck it until you click it a second time.

This has now been fixed.

zui-well now reflects property mutations to its attributes

<zui-well>'s styling targets itself via attributes, e.g. :host([dismissible]). Unfortunately, direct property mutations did not reflect to these attributes, resulting in style or behavioral issues. This became more noticable with React 19 and changes made by that framework to try to improve interoperability with Web Components.

This is now fixed, so doing the following will work:

const well = document.querySelector("zui-well");
well.dismissible = true;
assert.isTrue(well.matches("[dimissible]"));

Deprecations and removed features