This is simple list of radio buttons to select
Special properties of field
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
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
Usage
Radios field with array of strings:
{
type: "radios",
label: "Very best friend",
model: "friend",
values: [
"James",
"Nadia",
"Paul",
"Christelle",
"Marc",
"Marie"
]
}
Radios field with object values:
{
type: "radios",
label: "Choose you product color",
model: "color",
values: [
{ name: "Deep Pink", value:"#FF1493" },
{ name: "Peach Puff", value:"#FFDAB9" },
{ name: "Dark Orange", value:"#FF8C00", disabled: (model) => {
if(model.disableOrange) { return true; }
return false;
},
{ name: "Light Green", value:"#90EE90", disabled: true }
]
}
Radios field with custom object values:
{
type: "radios",
label: "Identify the dolphin's name from the photo",
model: "dolphin",
values: [
{ common_name: "White-beaked dolphin", binomial_nomenclature:"Lagenorhynchus albirostris" },
{ common_name: "Peale's dolphin", binomial_nomenclature:"Lagenorhynchus australis" },
{ common_name: "Northern right whale dolphin", binomial_nomenclature:"Lissodelphis borealis" },
{ common_name: "Common bottlenose dolphin", binomial_nomenclature:"Tursiops truncatus" },
{ common_name: "Long-beaked common dolphin", binomial_nomenclature:"Delphinus capensis" },
{ common_name: "Pacific white-sided dolphin", binomial_nomenclature:"Lagenorhynchus obliquidens" },
{ common_name: "Pantropical spotted dolphin", binomial_nomenclature:"Stenella attenuata" },
{ common_name: "Chilean dolphin", binomial_nomenclature:"Cephalorhynchus eutropia" }
],
radiosOptions: {
value:"binomial_nomenclature",
name:"common_name"
}
}
Styling
The is-checked
and is-disabled
CSS classes are attached to the radio options <label />
element when applicable.