For a ready group with a title, a description and messages take CdsRadioGroup: it is assembled from this group and the CdsInput wrapper.
CdsSelectionControlGroupis needed when you build your own set of controls.
Variations
Shared model and type
The value of the selected control is held by the group: v-model is on it, every nested control only has its own value. The type, true-icon and false-icon props are handed by the group to all the controls, and the shared name attribute for the native input elements is created by the group itself — it can be overridden with the name prop.
Multiple selection
An array in the model turns on multiple mode: every control adds its value to it. The mode is turned on automatically — the multiple prop is needed only to set it by hand.
Direction
By default the controls line up in a row and split the width of the group evenly. direction="vertical" puts them in a column — handier for long captions and for sets with descriptions.
States
disabled blocks the whole group, readonly forbids changing the selection without changing the look, error puts every control into the error state. A single option is blocked by the disabled prop of the control itself.
Colors and icons
color sets the color of the selected control, base-color the color of the unselected ones, true-icon and false-icon the pair of state icons. The values apply to all the controls of the group at once.
Passing the settings through
The group gives its settings to the component whose name is set in defaults-target — CdsSelectionControl by default. Put the name of a ready-made control there and the group starts controlling it: that is how CdsRadioGroup hands the settings to the radio buttons.
Scenarios
Filtering by categories
An array model collects the checked categories, and the list is rebuilt on the fly through a computed. inline leaves the controls the width of their captions, so the filters go in a dense row.
Selection tiles
The group does not dictate the markup to the controls: in the input slot every control draws its own tile, while the group still holds the selected value and ties the native input elements together with a single name.
API
The props, events and slots of a single control are on the CdsSelectionControl page.
Props
| Name | Type | Default | Description |
|---|---|---|---|
activeColor | string | undefined | — | Color of the component in its active state |
baseColor | string | undefined | — | Color of the component in its inactive state |
bgColor | string | undefined | — | Background color of the component |
color | string | undefined | — | Component color |
defaultsTarget | string | undefined | — | Name of the child component the group prop values are passed to as defaults |
direction | "horizontal" | "vertical" | undefined | 'horizontal' | Switches the component between horizontal and vertical layout. |
disabled | boolean | null | undefined | null | Disabled state |
error | boolean | undefined | — | Puts the component into the visual error state |
falseIcon | IconValue | undefined | — | Icon of the unselected state |
id | string | undefined | — | Unique identifier of the component |
inline | boolean | undefined | — | Renders the control as an inline element — the container does not stretch to the full width |
modelValue | any | — | Value of the component (v-model). In a group it is the value of the selected control, with multiple — an array of the selected values |
multiple | boolean | null | undefined | null | Allows selecting several values — the model becomes an array. Turns on automatically when an array is passed to modelValue |
name | string | undefined | — | The name attribute of the native input element. In a group one name joins all the nested controls |
readonly | boolean | null | undefined | null | Read-only state |
textColor | string | undefined | — | Text color of the component |
theme | string | undefined | — | Component theme |
trueIcon | IconValue | undefined | — | Icon of the selected state |
type | string | undefined | — | Type of the native input element — radio or checkbox, for example |
valueComparator | ValueComparator | undefined | true | Function comparing the model value with the value of the control. Deep comparison by default |
Events
| Name | Type | Description |
|---|---|---|
update:modelValue | [value: any] | Fires when the selection inside the group changes. Passes the new value of the group |
Slots
| Name | Type | Description |
|---|---|---|
default | any | The controls of the group — checkboxes or radio buttons |