Matterway
    Preparing search index...

    Function segmentedField

    • Segmented field component for single selection from multiple options. Supports both static and dynamic props based on current state.

      Parameters

      • props: UiSegmentedFieldProps

        Configuration object

        • name

          Name of the component

        • label

          Label text or a function that receives params with data and value, returning a promise of label

        • items

          Array of option texts or a function that receives params with data and value, returning a promise of options

        • required

          If true, the field is required

        • disabled

          True or false or a function that receives params with data and value, returning a promise of boolean

        • 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

        • hintMessage

          Hint message to display below the field or a function that receives params with data and value, returning a promise of hint message

        • hidden

          True or false or a function that receives params with data and value, returning a promise of boolean

      Returns Element

      Basic usage with required props

      segmentedField({
        name: 'status',
        label: 'Status',
        items: [
          { value: 'active', label: 'Active' },
          { value: 'inactive', label: 'Inactive' },
          { value: 'pending', label: 'Pending' }
        ]
      });

      Usage with async props depending on other fields and field value

      segmentedField({
        name: 'priority',
        label: async ({data}) => `Priority Level (${data.userType})`,
        items: async ({data}) =>
          data.userType === 'premium'
            ? [
                { value: 'low', label: 'Low Priority' },
                { value: 'medium', label: 'Medium Priority' },
                { value: 'high', label: 'High Priority' }
              ]
            : [
                { value: 'low', label: 'Low' },
                { value: 'medium', label: 'Medium' }
              ],
        invalid: async ({data, value}) =>
          data.required && !value ? 'Please select a priority' : false
      });

      Usage with conditional visibility

      segmentedField({
        name: 'userType',
        label: 'Type',
        items: [
          { value: 'personal', label: 'Personal' },
          { value: 'business', label: 'Business' }
        ],
        invalid: 'Please select a type'
      });

    Settings