Skip to Content
Logo of RG Logo of RG
  • Home
  • Shop
  • Events
  • Courses
  • Company
    • News
    • Success Stories
  • Odoo Docs 19
  • Appointment
  • Jobs
  • Contact us
  • 0
  • 0
  • +1 555-555-5556
  • Sign in
Logo of RG Logo of RG
  • 0
  • 0
    • Home
    • Shop
    • Events
    • Courses
    • Company
      • News
      • Success Stories
    • Odoo Docs 19
    • Appointment
    • Jobs
    • Contact us
  • +1 555-555-5556
  • Sign in
Odoo Docs 19
Home Components Guides Classes Search
418 components
Forms
  • Account Json Checkboxes
  • Ace
  • Ace Field
  • Allowed Qweb Expressions
  • Attachment Image
  • Attachment Image Field
  • Badge
  • Badge Field
  • Badge Selection Field
  • Binary
  • Binary
  • Binary
  • Binary Field
  • Boolean
  • Boolean Favorite
  • Boolean Favorite Field
  • Boolean Field
  • Boolean Icon
  • Boolean Icon Field
  • Boolean Toggle
  • Boolean Toggle
  • boolean Toggle Field
  • calendar Properties Field
  • card Properties Field
  • Char
  • Char Field
  • Code
  • Code Ir Ui View
  • Color
  • Color Field
  • Color Picker
  • Color Picker Field
  • Contact Image
  • contact Image Field
  • Contact Statistics
  • Contact Statistics Field
  • Copyclipboardbutton
  • copy Clipboard Button Field
  • Copyclipboardchar
  • copy Clipboard Char Field
  • Copyclipboardurl
  • copy Clipboard URL Field
  • Dashboard Graph
  • date Field
  • date Range Field
  • Date Time Field
  • Domain
  • Domain Field
  • Dynamic Placeholder Popover
  • Email
  • Email
  • Email Field
  • Field Selector
  • Field Selector Field
  • File Uploader
  • Filterable Selection
  • filterable Selection Field
  • Float
  • Float Factor
  • float Factor Field
  • Float Field
  • Float Time
  • Float Time Field
  • Float Toggle
  • Float Toggle Field
  • form Email Field
  • form Phone Field
  • form Url Field
  • Gauge
  • Gauge Field
  • Google Slide Viewer
  • Handle
  • Handle Field
  • Html
  • html Field
  • Iframe Wrapper
  • Iframe Wrapper Field
  • Image
  • Image Field
  • Image Url
  • Image Url Field
  • Integer
  • Integer Field
  • ir Ui View Ace Field
  • Journal Dashboard Graph Field
  • Json
  • Json Checkboxes
  • Json Field
  • Kanban Color Picker
  • kanban Color Picker Field
  • kanban Many2 Many Tags Avatar Field
  • kanban Many2 Many Tags Field
  • Kanban Many2 One
  • Kanban Many2 One Avatar Field
  • kanban Progress Bar Field
  • Label Selection
  • Label Selection Field
  • list Badge Selection Field
  • list Binary Field
  • list Boolean Toggle Field
  • list Date Field
  • list Date Range Field
  • list Date Time Field
  • list Many2 Many Tags Avatar Field
  • list Text Field
  • List X2 Many Field
  • Many2many
  • Many2many
  • Many2many
  • Many2many Binary
  • Many2 Many Binary Field
  • Many2many Checkboxes
  • Many2 Many Checkboxes Field
  • Many2many Tags
  • Many2many Tags
  • Many2many Tags
  • Many2many Tags Avatar
  • Many2many Tags Avatar
  • Many2many Tags Avatar
  • many2 Many Tags Avatar Field
  • Many2many Tags Avatar Popover
  • Many2 Many Tags Field
  • Many2 One
  • Many2one
  • Many2one Avatar
  • Many2one Avatar
  • Many2 One Avatar Field
  • Many2one Barcode
  • Many2 One Barcode Field
  • Many2 One Field
  • Many2one Reference
  • Many2 One Reference Field
  • Many2one Reference Integer
  • Many2 X Autocomplete
  • Monetary
  • Monetary Field
  • One2many
  • One2many
  • One2many
  • Pdf Viewer
  • Pdf Viewer Field
  • Percentage
  • Percentage Field
  • Percentpie
  • Percent Pie Field
  • Phone
  • Phone
  • Phone Field
  • Priority
  • Priority Field
  • Profiling Qweb View
  • Progressbar
  • Progressbar
  • Progress Bar Field
  • Properties
  • Properties
  • Properties
  • Properties
  • Properties Field
  • Property Definition
  • Property Definition Selection
  • Property Tags
  • Property Tags Field
  • Property Text
  • Property Value
  • Radio
  • Radio
  • Radio Field
  • Reference
  • Reference Field
  • Remaining Days
  • Remaining Days Field
  • Res User Group Ids
  • Res User Group Ids Privilege
  • Selection
  • Selection Badge
  • Selection Badge
  • Selection Badge With Filter
  • Selection Field
  • settings Radio Field
  • Signature Field
  • State Selection
  • State Selection Field
  • Statinfo
  • Stat Info Field
  • Statusbar
  • Status Bar Field
  • Text
  • Text
  • Text Field
  • Timezone Mismatch
  • timezone Mismatch Field
  • Translation Button
  • Translation Dialog
  • Upgrade Boolean
  • upgrade Boolean Field
  • Upgrade Dialog
  • Url
  • Url
  • Url Field
  • X2 Many Field
  • X2 Many Field Dialog
  1. Components
  2. Radio Field
OWL forms

Radio Field

Odoo 19 OWL component — Radio Field (views)

Live preview Interactive
Source excerpt web/static/src/views/fields/radio/radio_field.js
import { Component } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";
import { registry } from "@web/core/registry";
import { getFieldDomain } from "@web/model/relational_model/utils";
import { useSpecialData } from "@web/views/fields/relational_utils";
import { standardFieldProps } from "../standard_field_props";

let nextId = 0;
export class RadioField extends Component {
    static template = "web.RadioField";
    static props = {
        ...standardFieldProps,
        orientation: { type: String, optional: true },
        label: { type: String, optional: true },
        domain: { type: [Array, Function], optional: true },
    };
    static defaultProps = {
        orientation: "vertical",
    };

    setup() {
        this.id = `radio_field_${nextId++}`;
        this.type = this.props.record.fields[this.props.name].type;
        if (this.type === "many2one") {
            this.specialData = useSpecialData(async (orm, props) => {
                const { relation } = props.record.fields[props.name];
                const domain = getFieldDomain(props.record, props.name, props.domain);
                const kwargs = {
                    specification: { display_name: 1 },
                    domain,
                };
                const { records } = await orm.call(relation, "web_search_read", [], kwargs);
                return records.map((record) => [record.id, record.display_name]);
            });
        }
    }

    get items() {
        switch (this.type) {
            case "selection":
                return this.props.record.fields[this.props.name].selection;
            case "many2one": {
                return this.specialData.data;
            }
            default:
                return [];
        }
    }
    get value() {
        const value = this.props.record.data[this.props.name];
        switch (this.type) {
            case "selection":
                return value;
            case "many2one":
                return value && value.id;
            default:
                return null;
        }
    }

    /**
     * @param {any} value
     */
    onChange(value) {
        switch (this.type) {
            case "selection":
                this.props.record.update({ [this.props.name]: value[0] });
                break;
            case "many2one":
                this.props.record.update({
                    [this.props.name]: value && { id: value[0], display_name: value[1] },
                });
                break;
        }
    }
}

export const radioField = {
    component: RadioField,
    displayName: _t("Radio"),
    supportedOptions: [
        {
            label: _t("Display horizontally"),
            name: "horizontal",
            type: "boolean",
        },
    ],
    supportedTypes: ["many2one", "selection"],
    isEmpty: (record, fieldName) => record.data[fieldName] === false,
    extractProps: ({ options, string }, dynamicInfo) => ({
        orientation: options.horizontal ? "horizontal" : "vertical",
        label: string,
        domain: dynamicInfo.domain,
    }),
};

registry.category("fields").add("radio", radioField);
Registry / API
Registry name
RadioField
Category
—
Module
web
Slug
radio-field
Nav group
forms
Follow us

250 Executive Park Blvd, Suite 3400
San Francisco CA 94134

  • +1 555-555-5556
  • info@yourcompany.example.com
Copyright © Company name
Powered by Odoo - The #1 Open Source eCommerce