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).

import { XerOptionControl } from "@xerius/codey-components";

Showcases

With Radio Button

With Checkbox

With Info Tooltip

With Mixed Subcontent

When subcontent is used in the option control the label will have font-bold set. In case there is an option in the same list without subcontent, the label should also be bold. This can be done like the example below:

<template>
  <XerOptionControl input-id="with-subcontent-mushroom" container>
    <template #label>
      <span class="font-bold">Mushroom</span>
    </template>
    <XerRadioButton
      v-model="selectedOptions"
      input-id="with-subcontent-mushroom"
      name="subcontent-pizza"
      value="Mushroom"
    />
  </XerOptionControl>
</template>

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.