Radio
A radio button field that wraps <input type="radio">, allowing the user to select exactly one option from a group of buttons sharing the same name. Supports configurable color and an optional text label to the right. Set clearable to allow unchecking the current selection. For a higher-level API that manages a set of radio buttons automatically, see RadioGroup.
const radio = new Radio({
text : 'Option A',
name : 'choice',
checkedValue : 'A',
appendTo : document.body
});
Useful configs and properties
| Config | Description |
|---|---|
| text | Label text displayed to the right of the radio button |
| color | Radio button color (must have a matching CSS rule) |
| clearable | Allow unchecking by clicking a checked radio button |
| checkedValue | Value provided when this radio button is selected |
| label | Field label displayed beside the radio button |
Color can be specified, and you can optionally configure text to display in a label to the right of the radio button instead of, or in addition to, a standard field label.
Nested Items
A radio button can also have a container of additional items. These items can be displayed immediately following the field's label (which is the default when there is only one item) or below the radio button. This can be controlled using the inline config.
In the demo below notice how additional fields are displayed for the checked radio button:
See also
- RadioGroup - Container that manages a set of Radio buttons
- Checkbox - Checkbox for independent boolean toggles
- SlideToggle - Toggle switch variation
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
Set this to
trueso that clicking a checked radio button will clear its checked state.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Radio class, or subclass thereof.
-
Identifies an object as an instance of Radio class, or subclass thereof.
CSS variables
CSS variables that can be set to adjust appearance| Name | Description | |
|---|---|---|
| --b-radio-background | Radio button background | |
| --b-radio-check-gap | Size of the radio button "checkmark" (the dot) | |
| Checked | ||
| --b-radio-checked-background | Background of the radio button when checked | |
| --b-radio-checked-border-color | Radio button's border-color when checked | |
| --b-radio-checked-color | Color of the radio button "checkmark" (when checked) | |