Function: segmentedField()

function segmentedField(props: UiSegmentedFieldProps): Element;

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

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

Parameters

Parameter	Type	Description
props	UiSegmentedFieldProps	Configuration object

Returns

Element

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