Radio Property

A radio property lets users pick one option from a set, displayed as a group of radio buttons.

Required Parameters

options

This is an array that defines the choices for the radio group. Each option in the array should be an object with:

• label: The text displayed next to the radio button.
• value: The value passed to your component when the option is selected.

Catalog.register('Sample', {
  component: Sample,
  props: {
    alignment: {
      label: 'Alignment',
      type: 'radio',
      options: [
        { label: 'Left', value: 'left' },
        { label: 'Center', value: 'center' },
        { label: 'Right', value: 'right' },
      ],
    },
  },
});

Optional Parameters

render

f you want to create a totally custom look, you can provide your own render function to display the radio group however you like.

Heads up: When using a custom render function, the options array should only contain the raw values (e.g., ['left', 'center', 'right']) Your render function is now fully in charge of displaying the labels.