Changelog

Adding "clearable" to select component

This release introduces a new clearable feature for the Select component. It provides a way to clear the selected options (single and multiple) and improves the overall user experience.

This feature can be enabled by adding the clearable attribute to the select component:

<.select
  field={f[:country]}
  placeholder="Select a country"
  label="Country"
  options={[{"Germany", "de"}, {"Japan", "jp"}, {"Australia", "au"}]}
  clearable
/>

The clearable feature includes the following behaviors:

• Clear Icon: A "x" icon is displayed when there are selected options - clicking it clears all selections in both single and multiple select modes
• Option Unselect: Single option selects can now be unselected by clicking the selected option
• Backspace Key: Pressing backspace when the select is focused will clear all selections, similarly to clicking the clear icon

When unselecting a single option, an empty option (<option value="">) is selected under the hood, sending an empty string in the form data. This behavior matches how multiple select handles empty states by sending the ([""]) array.

Additionally, keyboard navigation has been improved. When opening the select using keyboard navigation, it will now start from the selected option instead of defaulting to the first or last position. This makes navigation more intuitive, especially with long option lists.

Bug Fixes

• Fixed: Stacked dialogs (sheet and modal) no longer lose their z-index reference when receiving LiveView patches

Improved Modal and Sheet Components

This release focuses on improving modal and sheet components along with fixing Safari-specific issues, with particular attention to focus management and interaction smoothness.

Key improvements in this release:

• Enhanced: Modal and sheet components now handle content overflow more gracefully with automatic scrolling, preventing screen overflow issues
• Enhanced: Opening modals and sheets no longer causes page shifting, regardless of the gutter stable setting
• Enhanced: Select component now shows a clear outline when focused or active, improving accessibility
• Enhanced: Focus management in modals and sheets now prioritizes elements with autofocus attributes
• Fixed: Date and time input fields now render correctly in Safari browsers
• Fixed: Focus trap behavior when modals or sheets contain no focusable elements

Check out the modal docs → and sheet docs → for more details about these components.

Checkbox and Radio Card Variants

This release introduces card variants for Checkbox and Radio components, providing an alternative layout for selection controls. These variants maintain the same component API as their standard counterparts while offering enhanced visual presentation.

To use the card variant, simply add the variant="card" attribute to any of the following components:

<.checkbox variant="card">
<.checkbox_group variant="card">
<.radio_group variant="card">

By default, the card variants hide their input controls for a cleaner appearance. You can display these controls by setting the control attribute to either "left" or "right", determining their position within the card.

The card variants support custom content through their respective slots (<:checkbox> and <:radio>), enabling various layout and styling possibilities. Here are two examples demonstrating custom implementations:

The same customization options are available for radio buttons:

I've also added a new comprehensive form layout example that showcases these new card variants in action: Job Application form example →

Also, check the checkbox docs → and the radio docs → for more details.

Enhanced Select Component

The Select component is one of the most sophisticated components in the Fluxon UI library. Based on valuable user feedback, this release brings several meaningful improvements and fixes to enhance its functionality.

Here are the key updates to the Select component:

• Enhanced: Better handling of large option lists - the dropdown now automatically adjusts its height to fit the screen
• Enhanced: Search box remains fixed at the top while options scroll beneath it, improving search usability
• Enhanced: Smarter positioning - the dropdown now compresses up to 150px height when space is limited, rather than flipping to the top (see video below)
• Fixed: Error message now displays with consistent styling across form components
• Fixed: The value attribute now works correctly in combination with the field attribute
• Fixed: Selected values properly reset when options are updated
• Fixed: Outline styling in the native variant aligns with the design system

The video below demonstrates the improved select positioning when screen space is limited:

Additional improvements in this release include:

• Improved alignment between error messages and their icons
• Enhanced focus-trap behavior for nested dialogs
• Added a new hide_close_button option for both modal and sheet components

Popover

The Popover component is now available as part of our overlay components collection. It builds on the same principles as the Dropdown but serves a different purpose - while Dropdowns are specialized for navigation menus, Popovers expects any type of content.

Built with the same attention to detail as other Fluxon components, it includes automatic positioning, smooth transitions, and keyboard navigation.