Matterway
    Preparing search index...

    Function buttonToggleField

    • ButtonToggleField component for single or multi-select buttons.

      Parameters

      • props: UiButtonToggleFieldProps

        Configuration object

        • name

          Name of the field in the state

        • label

          Label for the field

        • items

          Array of button items to display, or a function that returns the items based on state

        • size

          Size of the buttons: 'sm', 'default', or 'lg'. Defaults to 'sm'

        • multiple

          Whether multiple values can be selected. Defaults to false

        • required

          Whether the field is required

        • disabled

          Whether the field is disabled

        • hidden

          Whether the field is hidden

        • defaultValue

          Array of default selected values

        • onChange

          Callback function called when selection changes

        • invalid

          If false/undefined the field is valid. If a string is provided, it will be used as the validation message, or a function that returns validation state

      Returns Element

      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' }
        ]
      });

    Settings