Skip to content

Fiori Required Field Configuration

FioriRequiredFieldConfig lets you apply a specific style to the symbol for a 'required' field label through the Composition Local context. By default, an asterisk (*) serves as the symbol for a required field and is styled specifically. Typically, the required field symbol appears at the end of the label. However, you can set both the requiredFieldPrefixText and requiredFieldSuffixText to non-null values. In this case, you can place the symbol for the required field between them.

Using the Fiori Required Field Configuration

  • Here is a simple example of how you can use the FioriRequiredFieldConfig:
val label = "text with required"
CompositionLocalProvider(
    LocalRequiredFieldConfiguration provides requiredFieldConfig(
        requiredFieldText = "#",
        isRequired = true,
        requiredFieldColor = { MaterialTheme.fioriHorizonAttributes.SapFioriColorT2 },
        errorRequiredFieldColor = { Color.Unspecified },

    )
) {
    val localRequiredFieldConfig = LocalRequiredFieldConfiguration.current
    if (localRequiredFieldConfig.isRequired) {
        Text(
            text = buildAnnotatedString {
                append(label)
                withStyle(
                    style = SpanStyle(
                        color = localRequiredFieldConfig.requiredFieldColor(false)()
                     )
                ){
                    append(localRequiredFieldConfig.requiredFieldText)
                }
            }
        )
        }
     }
  • Here is an example to set 'requiredFieldPrefixText' and 'requiredFieldSuffixText':
       val requiredFieldConfig = copyFioriRequiredFieldConfig(
                isRequired = true,
                requiredFieldPrefixText = "requiredFieldPrefixText",
                requiredFieldSuffixText = "requiredFieldSuffixText"
            )
       CompositionLocalProvider(LocalRequiredFieldConfiguration provides requiredFieldConfig) {
            val localRequiredFieldConfiguration = LocalRequiredFieldConfiguration.current
            Text(
                text = buildAnnotatedString {
                    append(localRequiredFieldConfiguration.requiredFieldPrefixText)
                    withStyle(
                        style = localRequiredFieldConfiguration.requiredFieldSpanStyle
                            ?: SpanStyle(
                            color = localRequiredFieldConfiguration.requiredFieldColor(
                            isError
                        )()
                        )
                    ){
                    append("${localRequiredFieldConfiguration.requiredFieldText} ")
                    }
                     append(localRequiredFieldConfiguration.requiredFieldSuffixText)
                })
       }

Last update: October 31, 2025