12 Errors Monthly Because Checkbox Too Small? Create Custom Field Widgets in Odoo 18

my_custom_module/
├── __init__.py
├── __manifest__.py
├── models/
│   └── sale_order.py (example model)
├── views/
│   └── sale_order_views.xml
└── static/
    └── src/
        ├── js/
        │   └── bool_badge.js
        └── xml/
            └── bool_badge.xml

/** @odoo-module */

import { registry } from "@web/core/registry";
import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { Component } from "@odoo/owl";

export class BoolBadge extends Component {
    
    /**
     * Update field value when badge is clicked
     */
    updateValue(newValue) {
        this.props.record.update({
            [this.props.name]: newValue
        });
    }
    
    /**
     * Get current field value
     */
    get value() {
        return this.props.record.data[this.props.name];
    }
}

// Link to XML template
BoolBadge.template = "BoolBadge";

// Define accepted props
BoolBadge.props = {
    ...standardFieldProps,
    options: { type: Object, optional: true }
};

// Register widget in Odoo's field registry
export const boolBadge = {
    component: BoolBadge,
    supportedTypes: ["boolean"],
    extractProps: ({ attrs }) => {
        return {
            options: attrs.options
        };
    }
};

registry.category("fields").add("bool_badge", boolBadge);

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="BoolBadge" owl="1">
        <span 
            class="badge rounded-circle p-2 border"
            t-att-class="value ? 'bg-success text-white' : 'bg-danger text-white'"
            t-on-click="() => this.updateValue(!value)"
            style="cursor: pointer; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;"
        >
            <i t-att-class="value ? 'fa fa-check' : 'fa fa-times'"/>
        </span>
    </t>
</templates>

{
    'name': 'Custom Field Widgets',
    'version': '18.0.1.0.0',
    'category': 'Custom',
    'depends': ['web', 'sale'],
    'data': [
        'views/sale_order_views.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'my_custom_module/static/src/js/bool_badge.js',
            'my_custom_module/static/src/xml/bool_badge.xml',
        ],
    },
    'installable': True,
    'application': False,
}

from odoo import models, fields

class SaleOrder(models.Model):
    _inherit = 'sale.order'
    
    is_approved = fields.Boolean(
        string='Order Approved',
        default=False,
        help='Manager approval before processing'
    )

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="view_order_form_inherit" model="ir.ui.view">
        <field name="name">sale.order.form.inherit</field>
        <field name="model">sale.order</field>
        <field name="inherit_id" ref="sale.view_order_form"/>
        <field name="arch" type="xml">
            <xpath expr="//field[@name='partner_id']" position="after">
                <field name="is_approved" widget="bool_badge"/>
            </xpath>
        </field>
    </record>
</odoo>

export class BoolBadge extends Component {
    
    get trueColor() {
        return this.props.options?.trueColor || 'bg-success';
    }
    
    get falseColor() {
        return this.props.options?.falseColor || 'bg-danger';
    }
    
    updateValue(newValue) {
        this.props.record.update({
            [this.props.name]: newValue
        });
    }
    
    get value() {
        return this.props.record.data[this.props.name];
    }
}

<span 
    class="badge rounded-circle p-2 border"
    t-att-class="value ? trueColor + ' text-white' : falseColor + ' text-white'"
    t-on-click="() => this.updateValue(!value)"
>
    <i t-att-class="value ? 'fa fa-check' : 'fa fa-times'"/>
</span>

<field name="is_approved" 
       widget="bool_badge" 
       options="{'trueColor': 'bg-primary', 'falseColor': 'bg-warning'}"/>