Function: segmentedField()

function segmentedField(props: UiSegmentedFieldProps): Element;

Defined in: src/UI/blocks/segmentedField.tsx:74

Parameters

Parameter	Type	Description
props	UiSegmentedFieldProps	Configuration object

Returns

Element

Deprecated

Use the equivalent block from @matterway/sdk/UI instead. This block targets the old showUI path and will be removed when src/UI/ is dropped.

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

Examples

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