Radio icon buttons

[stuartromanek]

Summary

• Adds buttons setting to radio input
• both button mode and not support icons
• everything keyboard accessible
• focus states

Preview

Clipboard-20251023-185458-778.mp4

Field configs of interest

radioFields: {
  label: 'Regular Radio',
  type: 'radio',
  choices: [
    {
      label: 'Small',
      value: 'small'
    },
    {
      label: 'Medium',
      value: 'med'
    },
    {
      label: 'Big',
      value: 'big'
    }
  ]
},
radioIconsFields: {
  label: 'Radios with Icons',
  type: 'radio',
  choices: [
    {
      label: 'Up',
      value: 'up',
      icon: 'arrow-up-icon'
    },
    {
      label: 'Down',
      value: 'down',
      icon: 'arrow-down-icon'
    },
    {
      label: 'Left',
      value: 'left',
      icon: 'arrow-left-icon'
    },
    {
      label: 'Right',
      value: 'right',
      icon: 'arrow-right-icon'
    }
  ]
},
radioButtonsFields: {
  label: 'Radio buttons with labels',
  type: 'radio',
  buttons: true,
  choices: [
    {
      label: 'Left',
      value: 'left',
      icon: 'format-align-left-icon'
    },
    {
      label: 'Center',
      value: 'center',
      icon: 'format-align-center-icon'
    },
    {
      label: 'Right',
      value: 'right',
      icon: 'format-align-right-icon'
    }
  ]
},
radioButtonsTooltipsFields: {
  label: 'Radio buttons with tooltips',
  type: 'radio',
  buttons: true,
  choices: [
    {
      tooltip: 'Left',
      value: 'left',
      icon: 'format-align-left-icon'
    },
    {
      tooltip: 'Center',
      value: 'center',
      icon: 'format-align-center-icon'
    },
    {
      tooltip: 'Right',
      value: 'right',
      icon: 'format-align-right-icon'
    }
  ]
},

Tests

https://github.com/apostrophecms/testbed/actions/runs/18760973118

Related

https://github.com/apostrophecms/testbed/pull/394

[BoDonkey]

One part of me says, " we are acshually in code freeze", but the cowboy part of me says" F*ck yeh, looks great to me!"