Function segmentedField

  • segmentedField(props): Element

  • Creates a segmented field component for single selection from multiple options. Supports both static and dynamic (async) props that can be computed based on the current state.

    Parameters

    • props: UiSegmentedFieldProps

      Configuration object

    Returns Element

    A JSX element representing the segmented field component

    Example

    Basic usage with required props

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

    Example

    Usage with async props

    segmentedField({
      name: 'priority',
      label: async (state) => `Priority Level (${state.userType})`,
      items: async (state) =>
        state.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' }
            ],
      validationMessage: async (state) =>
        state.required && !state.priority ? 'Please select a priority' : undefined
    });

    Example

    Usage with conditional visibility

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

Settings