Option Control
The XerOptionControl helps to create a form layout for option input components like XerCheckbox and XerRadioButton. It facilitates the layout of the label and subcontent.
Usage
It has a default slot where the form component can be placed and used directly as child component. And it has the prop container to change the look and feel of the option input.
The Option Control expect the needed props and slots for the other components (label, caption and error).
js
import { XerOptionControl } from "@xerius/codey-components";Showcases
With Radio Button
With Checkbox
With Info Tooltip
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| input-id | String | true | The ID Value | |
| dataAutomationId | String | () => input-id | false | The data automation id value |
| label | String | false | The label value. | |
| caption | String | false | The caption value. | |
| container | Boolean | false | false | If set to true, it displays the child component in a container |
| tooltip | String | false | The tooltip value. |
Slots
The slots are provided to give you an alternative option to set the content of the component.
| Name | Purpose |
|---|---|
| default | Showing the form component content |
| label | Showing the label content |
| subcontent | Showing the subcontent |
Automation Ids
A data-automation-id needs to be provided to the component as Prime Vue based components do not have a default data-automation-id.