Note Text Field¶
The note text field is a subtype of the simple text field, but it support multiline editable text. By default, the note text field height increases up to the specified maximum number of lines (default six) and, once the maximum height is reached, scrolls vertically to accommodate additional lines. As the subtype of the simple text field, the note text field also supports setting up helper, placeholder, or error texts. The trailing icon, however, is not supported.
For more information about the simple text field, see SimpleTextField.
Using the Note Text Field¶
This text field can be used in your app like any traditional composable function:
var textValueState by rememberSaveable { mutableStateOf("") }
FioriNoteTextField(
content = FioriTextFieldContent(
label = "Note Text Filed"
),
value = textValue.value,
onValueChange = {
textValue.value = it
}
)
Editable and Non-Editable Modes¶
Like the simple text field, the note text field can also be set to be in non-editable mode, where the field is enabled but the value field is not editable. By default, the text field is editable. You can control the editability of the text field using the readOnly parameter:
var textValueState by rememberSaveable { mutableStateOf("") }
FioriNoteTextField(
content = FioriTextFieldContent(
label = "Note Text Filed"
),
value = textValue.value,
onValueChange = {
textValue.value = it
},
readOnly = true,
)
Helper, Placeholder, Error Texts and Semantic Messages¶
Like the simple text field, the note text field also supports setting up helper, placeholder, error texts, or semantic messages. In the FioriTextFieldContent model, set the parameter to helperText, placeholder, or errorMessage, as required.
Semantic Messages¶
In addition to helper and error texts, you can provide semantic messages to display additional states such as informational, success, or warning feedback. This feature is useful for dynamic validation, progress feedback (such as password strength), or non-blocking alerts.
Semantic Types¶
Semantic messages are defined using the SemanticType enum:
enum class SemanticType {
Success, Warning, Information, None
}
Defining Validation Message Data¶
Use the ValidationMessageData class to configure validation messages. This enables you to define text and icons for each semantic type and error type.
data class ValidationMessageData(
var semanticType: SemanticType = SemanticType.None,
var warningMessage: String? = null,
var informationMessage: String? = null,
var successMessage: String? = null,
var errorIcon: FioriIcon? = FioriIcon(
resId = com.sap.cloud.mobile.fiori.compose.R.drawable.ic_sap_icon_message_error
),
var warningIcon: FioriIcon? = FioriIcon(
resId = com.sap.cloud.mobile.fiori.compose.R.drawable.ic_sap_icon_message_warning
),
var informationIcon: FioriIcon? = FioriIcon(
resId = com.sap.cloud.mobile.fiori.compose.R.drawable.ic_sap_icon_message_information
),
var successIcon: FioriIcon? = FioriIcon(
resId = com.sap.cloud.mobile.fiori.compose.R.drawable.ic_sap_icon_message_success
),
var helperIcon: FioriIcon? = null,
var helperText: String? = null,
var errorMessage: String? = null,
)
Example¶
var noteText by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
var semanticType by rememberSaveable { mutableStateOf(SemanticType.None) }
var helperText by rememberSaveable { mutableStateOf("") }
val validationData = ValidationMessageData(
semanticType = semanticType,
informationMessage = "You can provide additional details here.",
warningMessage = "Note is getting long. Please keep it concise.",
errorMessage = "Too many characters.",
successMessage = "Looks good!",
helperIcon = FioriIcon(resId = R.drawable.ic_sap_icon_comment)
)
val content = FioriTextFieldContent(
label = stringResource(id = R.string.content_expanded),
placeholder = stringResource(id = R.string.content_expanded),
helperText = helperText,
maxCharacterCounter = 200,
allowAlwaysTyping = true,
validationMessageData = validationData,
)
FioriNoteTextField(
value = noteText,
onValueChange = {
noteText = it
// Update semantic type based on text length
semanticType = when {
it.text.length > 180 -> SemanticType.Warning
it.text.length > 200 -> SemanticType.Information
it.text.isNotEmpty() -> SemanticType.Success
else -> SemanticType.None
}
},
content = content,
)
By combining isError and semanticType, developers can provide both blocking (error) and non-blocking (semantic) feedback in a single, consistent UI pattern. This approach improves clarity and reduces user confusion.
Selectable Text¶
The note text field allows you to enable or disable the ability to select the value text in non-editable states. These text field are always selectable if they are editable. However, if the text field is not editable, you can control the ability to select text using the textSelectable parameter.
MultiLine¶
Unlike the simple text field, the note text field supports multiple lines (default six) in editable mode. The height of the text field increases up to either the maximum number of lines, or the maximum height set on the text field, whichever is smaller. Once the limit is reached, the text scrolls to accommodate more lines. You can control the number of lines supported using the noteTextFieldMaxLines parameter of the FioriTextFieldDefaults.styles() function to set the number of lines on the text field. Use the 'noteTextFieldMaxHeight' parameter to set the maximum height.
var textValueState by rememberSaveable { mutableStateOf("") }
FioriNoteTextField(
content = FioriTextFieldContent(
label = "Note Text Filed"
),
value = textValue.value,
onValueChange = {
textValue.value = it
},
styles = FioriTextFieldDefaults.styles(
noteTextFieldMaxLines = 12,
noteTextFieldMaxHeight = 233.dp
)
)
For additional information on the 'styles' parameter, see SimpleTextField.
Listening for Text Value Changes¶
See SimpleTextField.
Character Counter¶
See SimpleTextField.
Customization¶
Like the simple text field, the note text field also support customization using FioriTextFieldDefaults. For additional information on customization, see SimpleTextField.
Inline AI Notice¶
The Inline AI Notice is shown when displaying generative content, such as suggestions for text. Create an instance of InlineNoticeData with the appropriate data and pass it as a parameter. A lambda function for handling hyperlink onClick events must also be provided. See InlineNotice for more details.
FioriNoteTextField(
/* other parameters */
content = FioriTextFieldContent(
/* other parameters */
inlineNoticeData = InlineNoticeData(showInlineNotice = true),
onHyperlinkClick = { /* Handle inline notice hyperlink click */ }
)
