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, and Error Texts¶

Like the simple text field, the note text field also supports setting up helper, placeholder, or error texts. In the FioriTextFieldContent model, set the parameter to helperText, placeholder, or errorMessage, as required.

Helper, Placeholder, and Error Texts

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.

Text Selectable

`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¶