Skip to main content

RadioButton

The RadioButton component provides a group of mutually exclusive options where only one can be selected at a time. It supports both traditional radio buttons and button-style variants.

Overview​

RadioButton provides a complete single-selection solution with:

  • Traditional radio and button variants
  • Horizontal and vertical layouts
  • Label position control
  • Auto-width for button variants
  • Helper text support
  • Disabled state

Basic Usage​

{
  uuid: "my-radio",
  name: "payment_method",
  component_type: "radio-button",
  inputHandlers: {
    value: `
      return {
        options: [
          { label: 'Credit Card', value: 'credit' },
          { label: 'PayPal', value: 'paypal' },
          { label: 'Bank Transfer', value: 'bank' }
        ],
        currentValue: $paymentMethod || 'credit',
        type: 'default'
      };
    `
  },
  event: {
    onChange: `
      $paymentMethod = EventData.value;
    `
  }
}

Component Inputs​

PropertyTypeDefaultDescription
valueobject-Object with options, currentValue, and type
directionstring'vertical'Layout: 'vertical', 'horizontal'
positionstring'left'Label position: 'left', 'right'
sizestring'medium'Size: 'small', 'medium', 'large'
statestring'default'State: 'default', 'disabled'
requiredbooleanfalseMark as required
namestring'radioGroup'Form field name
autoWidthbooleanfalseAuto-width for button type
helperstring''Helper text

Inputs​

value​

Type: object

Object containing options array, current value, and display type.

inputHandlers: {
  value: `
    return {
      options: [
        { label: 'Option A', value: 'a' },
        { label: 'Option B', value: 'b' },
        { label: 'Option C', value: 'c', disabled: true }
      ],
      currentValue: $selectedOption || 'a',
      type: 'default'  // or 'button'
    };
  `
}

Events​

onChange​

Triggered: When selection changes

EventData:

{
  value: any        // Selected value
  option: object    // Selected option object
  oldValue: any     // Previous value
}

Common Patterns​

Payment Method Selection​

{
  component_type: "radio-button",
  input: { direction: { type: "string", value: "vertical" } },
  inputHandlers: {
    value: `
      return {
        options: [
          { label: 'Credit Card', value: 'credit' },
          { label: 'PayPal', value: 'paypal' },
          { label: 'Bank Transfer', value: 'bank' }
        ],
        currentValue: $paymentMethod || 'credit',
        type: 'default'
      };
    `
  },
  event: {
    onChange: `
      $paymentMethod = EventData.value;
      $showCardForm = EventData.value === 'credit';
      $showBankForm = EventData.value === 'bank';
    `
  }
}

Button-Style Tabs​

{
  component_type: "radio-button",
  input: { direction: { type: "string", value: "horizontal" } },
  inputHandlers: {
    value: `
      return {
        options: [
          { label: 'Daily', value: 'daily' },
          { label: 'Weekly', value: 'weekly' },
          { label: 'Monthly', value: 'monthly' }
        ],
        currentValue: $timeframe || 'monthly',
        type: 'button'
      };
    `
  },
  event: {
    onChange: `
      $timeframe = EventData.value;
      $chartData = await LoadChartData(EventData.value);
    `
  }
}

Size Selection​

{
  component_type: "radio-button",
  input: {
    direction: { type: "string", value: "horizontal" },
    autoWidth: { type: "boolean", value: true }
  },
  inputHandlers: {
    value: `
      const sizes = ['XS', 'S', 'M', 'L', 'XL'];
      const availableSizes = $product?.availableSizes || sizes;

      return {
        options: sizes.map(size => ({
          label: size,
          value: size,
          disabled: !availableSizes.includes(size)
        })),
        currentValue: $selectedSize || 'M',
        type: 'button'
      };
    `
  },
  event: {
    onChange: `
      $selectedSize = EventData.value;
      const stock = await CheckStock($product.id, EventData.value);
      $inStock = stock > 0;
    `
  }
}

See Also​