radios

This is simple list of radio buttons to select
Special properties of field
Property
Default
Accepted values
Description
values
none
Array or Function
List of items. See details below.
radiosOptions
{}
Object
Settings to radios component. See details below.
values
It can be an array with items, or a Function then returns an array of items. The items can be a String, Boolean, Number or an Object (see below). |
Item Object
Property
Default
Accepted Values
Description
name
none
String
The text displayed beside the radio button (ie; Label)
value
none
String
The value of the radio option stored in the model
disabled
none
Boolean or Function
Used to disable this radio option
You can change value and name (under radiosOptions) to select any properties of that object as the value or name.
If disabled is set to a function, it will be passed a reference to the model
radiosOptions
Property
Default
Accepted values
Description
value
none
String
Used to select any properties from object in values to use as actual value to save in model.
name
none
String
Used to select any properties from object in name to use as display in the list
Usage
Radios field with array of strings:
1
{
2
    type: "radios",
3
    label: "Very best friend",
4
    model: "friend",
5
    values: [
6
        "James",
7
        "Nadia",
8
        "Paul",
9
        "Christelle",
10
        "Marc",
11
        "Marie"
12
    ]
13
}
Copied!
Radios field with object values:
1
{
2
    type: "radios",
3
    label: "Choose you product color",
4
    model: "color",
5
    values: [
6
        { name: "Deep Pink", value:"#FF1493" },
7
        { name: "Peach Puff", value:"#FFDAB9" },
8
        { name: "Dark Orange", value:"#FF8C00", disabled: (model) => { 
9
            if(model.disableOrange) { return true; } 
10
            return false; 
11
        },
12
        { name: "Light Green", value:"#90EE90", disabled: true }
13
    ]
14
}
Copied!
Radios field with custom object values:
1
{
2
    type: "radios",
3
    label: "Identify the dolphin's name from the photo",
4
    model: "dolphin",
5
    values: [
6
        { common_name: "White-beaked dolphin", binomial_nomenclature:"Lagenorhynchus albirostris" },
7
        { common_name: "Peale's dolphin", binomial_nomenclature:"Lagenorhynchus australis" },
8
        { common_name: "Northern right whale dolphin", binomial_nomenclature:"Lissodelphis borealis" },
9
        { common_name: "Common bottlenose dolphin", binomial_nomenclature:"Tursiops truncatus" },
10
        { common_name: "Long-beaked common dolphin", binomial_nomenclature:"Delphinus capensis" },
11
        { common_name: "Pacific white-sided dolphin", binomial_nomenclature:"Lagenorhynchus obliquidens" },
12
        { common_name: "Pantropical spotted dolphin", binomial_nomenclature:"Stenella attenuata" },
13
        { common_name: "Chilean dolphin", binomial_nomenclature:"Cephalorhynchus eutropia" }
14
    ],
15
    radiosOptions: {
16
        value:"binomial_nomenclature",
17
        name:"common_name"
18
    }
19
}
Copied!
Styling
The is-checked and is-disabled CSS classes are attached to the radio options <label /> element when applicable.

label

select

Last modified 3yr ago

Copy link

Contents

Special properties of field

Special properties of field

`values`

Item `Object`

`radiosOptions`

Usage

Radios field with array of strings:

Radios field with object values:

Radios field with custom object values:

Styling