TextArea
Text area enables users to edit Multi-line text via hardware or software keyboard, providing different decorations such as Label, helper text, and counter. Whenever the user edits the text, onChange is called with the most up to date state represented by value. value contains the text entered by user. fields, useful when you want to allow users to enter a sizeable amount of text.
Parameters
the input text to be shown in the text field.
the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback.
the label to be displayed on top of the text field..
Modifier to be applied to the TextArea.
Helper text shown below the field used for Error and Success states. Uses HelperTextState.Regular as Default state.
Character limit counter values used for how many characters should be allowed in the field and an accessibility message e.g "Max length reached".
A state that blocks input and changes the UI when used with ReadOnly and Disabled. Default state is Enabled.
The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.
software keyboard options that contains configuration such as KeyboardType and ImeAction.
when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in KeyboardOptions.imeAction.
The MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CharacterCounterParams
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.TextArea
fun main() {
//sampleStart
// TODO Update sample with non deprecated functions
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
// Create a remember mutable String
var text by rememberSaveable { mutableStateOf("Hello") }
// Simple Text area
TextArea(
value = text, // Assign mutable to value parameter
modifier = Modifier,
onChange = { input ->
text = input // Assign new input to the mutable var otherwise text will never update
// Add any other logic or validation you need
},
label = "Label",
characterCounterParams = CharacterCounterParams.None
)
// Simple Text area
TextArea(
value = text,
modifier = Modifier,
onChange = { text = it },
label = "Label",
characterCounterParams = CharacterCounterParams.None,
helperTextParams = HelperTextParams(HelperTextState.Regular, "Simple Text area with helper text")
)
// Text area Helper text & counter
TextArea(
value = text,
modifier = Modifier,
onChange = { text = it },
label = "Label",
helperTextParams = HelperTextParams(HelperTextState.Regular, "Help Text"),
characterCounterParams = CharacterCounterParams(
characterLimit = 20,
accessibilityCharacterLimitMessage = "Character limit reached"
) // Add meaningfully message for accessibility
)
// Text area with State
TextArea(
value = text,
onChange = { text = it },
label = "Label",
helperTextParams = HelperTextParams(HelperTextState.Error, "Please enter valid text") // always add related message with the state
)
}
}
//sampleEnd
}Deprecated
`enabled` has been replaced by `enabledState`. Use the corresponding function instead.
Replace with
TextArea(value = value,onChange = onChange,label = label,modifier = modifier,helperTextParams = HelperTextParams(state.toHelperState(), helperText),characterCounterParams = CharacterCounterParams(characterLimit, accessibilityCharacterLimitMessage),enabledState = if (enabled) EnabledState.Enabled else EnabledState.Disabled,visualTransformation = visualTransformation,keyboardOptions = keyboardOptions,keyboardActions = keyboardActions,interactionSource = interactionSource)Text area enables users to edit Multi-line text via hardware or software keyboard, providing different decorations such as Label, helper text, and counter. Whenever the user edits the text, onChange is called with the most up to date state represented by value. value contains the text entered by user. fields, useful when you want to allow users to enter a sizeable amount of text.
Parameters
the input text to be shown in the text field.
the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback.
the label to be displayed on top of the text field..
Modifier to be applied to the TextArea.
Helper text conveys additional guidance about the input field. If the input has an error or success message, it should replace the helper text once displayed.
max amount of character allowed. When set, display a character counter decorator with format "textLength/limit".
message to be deliver by the accessibility manager when character limit is reached e.g "Max length reached".
whether the component is enabled or grayed out.
The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.
software keyboard options that contains configuration such as KeyboardType and ImeAction.
when the input service emits an IME action, the corresponding callback is called. Note that this IME action may be different from what you specified in KeyboardOptions.imeAction.
BaseField.State use to set the state as Error, Success or Warning to display the component with proper UI colors. The default value is BaseField.State.Default.
The MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this component in different Interactions.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.CharacterCounterParams
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.TextArea
fun main() {
//sampleStart
// TODO Update sample with non deprecated functions
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
// Create a remember mutable String
var text by rememberSaveable { mutableStateOf("Hello") }
// Simple Text area
TextArea(
value = text, // Assign mutable to value parameter
modifier = Modifier,
onChange = { input ->
text = input // Assign new input to the mutable var otherwise text will never update
// Add any other logic or validation you need
},
label = "Label",
characterCounterParams = CharacterCounterParams.None
)
// Simple Text area
TextArea(
value = text,
modifier = Modifier,
onChange = { text = it },
label = "Label",
characterCounterParams = CharacterCounterParams.None,
helperTextParams = HelperTextParams(HelperTextState.Regular, "Simple Text area with helper text")
)
// Text area Helper text & counter
TextArea(
value = text,
modifier = Modifier,
onChange = { text = it },
label = "Label",
helperTextParams = HelperTextParams(HelperTextState.Regular, "Help Text"),
characterCounterParams = CharacterCounterParams(
characterLimit = 20,
accessibilityCharacterLimitMessage = "Character limit reached"
) // Add meaningfully message for accessibility
)
// Text area with State
TextArea(
value = text,
onChange = { text = it },
label = "Label",
helperTextParams = HelperTextParams(HelperTextState.Error, "Please enter valid text") // always add related message with the state
)
}
}
//sampleEnd
}