Function: buttonToggleField()

function buttonToggleField(props: UiButtonToggleFieldProps): Element;

Defined in: src/UI/blocks/buttonToggleField.tsx:115

ButtonToggleField component for single or multi-select buttons.

Parameters

Parameter	Type	Description
props	UiButtonToggleFieldProps	Configuration object

Returns

Element

Examples

Basic single-select button toggle field

buttonToggleField({
  name: 'preference',
  label: 'Select your preference',
  items: [
    { label: 'Yes', value: 'yes' },
    { label: 'No', value: 'no' },
    { label: 'Maybe', value: 'maybe' }
  ]
});

Multi-select button toggle field

buttonToggleField({
  name: 'features',
  label: 'Select features',
  multiple: true,
  items: [
    { label: 'Feature A', value: 'a' },
    { label: 'Feature B', value: 'b' },
    { label: 'Feature C', value: 'c' }
  ]
});

Button toggle field with icons

buttonToggleField({
  name: 'notification',
  label: 'Notification method',
  items: [
    { label: 'Email', value: 'email', icon: <IconMail size={16} /> },
    { label: 'SMS', value: 'sms', icon: <IconPhone size={16} /> },
    { label: 'Push', value: 'push', icon: <IconBell size={16} /> }
  ]
});

Required button toggle field with validation

buttonToggleField({
  name: 'agreement',
  label: 'Do you agree?',
  required: true,
  items: [
    { label: 'I agree', value: 'agree' },
    { label: 'I disagree', value: 'disagree' }
  ],
  invalid: ({value}) => !value?.length ? 'Please select an option' : false
});

Dynamic items based on params with data and value

buttonToggleField({
  name: 'selectedOption',
  label: 'Choose an option',
  items: ({data}) => data.availableOptions || []
});

Button toggle field with different sizes

buttonToggleField({
  name: 'size',
  label: 'Select size',
  size: 'lg',
  items: [
    { label: 'Small', value: 'sm' },
    { label: 'Medium', value: 'md' },
    { label: 'Large', value: 'lg' }
  ]
});