Modern web users expect interfaces that are not only functional but also visually polished and intuitive. While Odoo 17 provides powerful tools for building websites and eCommerce platforms, some default HTML elements—such as the native <select> dropdown—can feel outdated in terms of design and user experience. For businesses using Odoo as a Business Management ERP, enhancing front-end components can significantly improve usability, accessibility, and overall brand perception.

In this guide, we explore how to build a fully custom, dynamic selection field component for Odoo 17. This solution replaces the standard select element with a modern, reusable, and accessible dropdown that integrates seamlessly with Odoo’s website framework. We’ll cover the architectural approach, JavaScript widget logic, QWeb templating, SCSS styling, and dynamic data integration through Python controllers.

Why Customize the Default Select Element in Odoo 17?

Odoo’s built-in form elements are reliable and backend-friendly, but they often lack flexibility in design. Styling native <select> elements consistently across browsers is notoriously difficult. Additionally, advanced interactions—such as keyboard navigation, custom icons, or dynamic status indicators—are limited.

By creating a custom dropdown component, you gain:

• Full control over UI and UX design

• Improved accessibility with ARIA roles and keyboard support

• Reusability across multiple pages and forms

• Better alignment with modern design systems

• Seamless backend integration with Odoo forms and controllers

This approach is especially valuable for portals, eCommerce flows, and custom business forms where user experience directly impacts conversions.

Architectural Overview

The custom selection component in Odoo 17 consists of four main layers:

1. JavaScript Widget – Handles interactivity, state management, and accessibility

2. QWeb Template – Defines the HTML structure and makes the component reusable

3. SCSS Styling – Provides a clean, modern visual design

4. Python Controller Integration – Supplies dynamic option data from the backend

Each layer is modular, making the component easy to maintain and extend.

Building the JavaScript Widget (Odoo 17 Way)

Odoo 17 continues to rely on publicWidget.Widget for front-end website widgets. By extending this core class, your custom dropdown becomes a first-class citizen within the Odoo website ecosystem.

The widget is responsible for:

• Initialization (start)
  It identifies DOM elements such as the button, dropdown list, options, and hidden input. It also binds a global click listener to close the dropdown when users click outside the component.

• Event Handling
  Mouse and keyboard events are handled uniformly. Users can open or close the dropdown using clicks, Enter, or Space keys, and navigate options using arrow keys. This ensures accessibility for keyboard and assistive-technology users.

• Selection Logic
  When an option is selected, the widget updates:

  • The visible label

  • A checkmark icon next to the active option

  • A hidden input field that stores the actual value

  This hidden input ensures compatibility with Odoo’s backend form processing.

• Accessibility Enhancements
  ARIA attributes such as aria-expanded, aria-selected, and role="listbox" are updated dynamically to meet accessibility standards.

This widget-based approach allows your dropdown to behave like a native component while offering far more flexibility.

Designing a Reusable QWeb Template

The QWeb template defines the structural skeleton of the dropdown. It includes:

• An outer wrapper that acts as the widget selector

• A hidden input field for form submission

• A button element displaying the selected value

• A dropdown container holding a list of options

The real strength of this template lies in its reusability. By passing variables such as dropdown_name, selected_label, and dynamic options, the same template can be reused across multiple forms and pages without duplication.

Using t-call and t-foreach, options can be injected dynamically, making the component ideal for selections like order status, country lists, workflow stages, or custom business states.

Dynamic Data from Python Controllers

In real-world applications, dropdown values rarely remain static. Odoo’s Python controllers can return lists of selections based on models, configurations, or business logic.

For example, a controller can fetch state selections from a model field and pass them to the template context. The QWeb loop then renders each option dynamically, while the JavaScript widget handles the interaction layer.

This clean separation between backend logic and front-end rendering keeps your codebase organized and scalable.

Modern SCSS Styling for a Polished Look

The SCSS layer is where the component truly comes to life visually. The provided styling focuses on:

• Clean spacing and typography

• Smooth transitions and hover effects

• Clear focus states for accessibility

• Responsive behavior for mobile devices

• Optional status-based color coding

The dropdown uses subtle shadows, rounded corners, and a neutral color palette that fits seamlessly into professional Odoo website themes. Scrollbar styling and responsive adjustments further enhance the user experience.

Because the styles are scoped to the component class, they won’t interfere with other elements on your site.

Accessibility and User Experience Considerations

Accessibility is often overlooked in custom UI components, but this implementation addresses it from the ground up:

• Full keyboard navigation

• Focus management when opening and closing the dropdown

• Proper ARIA roles and attributes

• Visual focus indicators

These considerations ensure that the dropdown is usable by a wider audience and compliant with modern accessibility standards.

Benefits for Odoo-Based Businesses

For companies using Odoo as a Business Management ERP, small UI enhancements can have a big impact. A custom dropdown component:

• Improves data entry accuracy

• Enhances user satisfaction in portals and forms

• Strengthens brand consistency

• Reduces dependency on browser-specific behavior

It also demonstrates how Odoo’s flexible framework allows deep customization without breaking core functionality.

Conclusion

Building a custom dynamic selection field for Odoo 17 is a powerful way to elevate your website’s user experience. By combining a JavaScript widget, reusable QWeb templates, modern SCSS styling, and dynamic backend data, you can replace outdated form elements with a sleek, accessible, and fully integrated solution.

This modular approach not only improves usability today but also makes future enhancements—such as search filtering, icons, or multi-select support—easy to implement. With thoughtful design and clean architecture, even small components can significantly enhance the overall quality of your Odoo website.

Booking an implementation consultant today.