CodexRadio
A binary input that always exists in a group, in which only one input can be on at a time.
Typical use will involve using v-for to loop through an array of items and output a Radio component for each one. Each Radio will have the same v-model binding and name prop, but different inputValue props and label content.
The v-model value is the inputValue of the Radio that is currently on.
Demos
Radio group
Radio group value: radio-2
| Name | Value |
|---|---|
| View | |
Reading direction | |
Inline radios
Usage
Props
| Prop name | Description | Type | Default |
|---|---|---|---|
modelValue | Value of the currently selected radio. Provided by v-model binding in the parent component. | string|number|boolean | '' |
inputValue | HTML "value" attribute to assign to the input. Required for input groups. | string|number|boolean | false |
name | HTML "name" attribute to assign to the input. Required for input groups | string | '' |
disabled | Whether the disabled attribute should be added to the input. | boolean | false |
inline | Whether the component should display inline. By default, display: block is set and a margin exists between sibling components, for a stacked layout. | boolean | false |
Events
| Event name | Properties | Description |
|---|---|---|
update:modelValue | modelValue string|number|boolean - The new model value | Emitted when modelValue changes. |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Input label content |
CSS-only version
WARNING
CSS-only components are experimental and not yet available for use inside MediaWiki.
Markup structure
Radio group
Native attributes of the <input> element can be used. For example:
- Add the
checkedattribute to the<input>element if it should be selected initially. - Add the
disabledattribute to the<input>element if it should be disabled.
Inline radios
Add the cdx-radio--inline class to the root element to get an inline layout.