Design/net.ikea.skapa.ui.components/TextArea

TextArea

fun TextArea(value: String, onChange: (String) -> Unit, label: String, modifier: Modifier = Modifier, helperTextParams: HelperTextParams = HelperTextParams.None, characterCounterParams: CharacterCounterParams = CharacterCounterParams.None, enabledState: EnabledState = EnabledState.Enabled, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default.copy(autoCorrectEnabled = false), keyboardActions: KeyboardActions = KeyboardActions.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })(source)

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

value

the input text to be shown in the text field.

onChange

the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback.

label

the label to be displayed on top of the text field..

modifier

Modifier to be applied to the TextArea.

helperTextParams

Helper text shown below the field used for Error and Success states. Uses HelperTextState.Regular as Default state.

characterCounterParams

Character limit counter values used for how many characters should be allowed in the field and an accessibility message e.g "Max length reached".

enabledState

A state that blocks input and changes the UI when used with ReadOnly and Disabled. Default state is Enabled.

visualTransformation

The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.

keyboardOptions

software keyboard options that contains configuration such as KeyboardType and ImeAction.

keyboardActions

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.

interactionSource

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.

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
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 
   SkapaTheme2(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
}

@Composable

fun TextArea(value: TextFieldValue, onChange: (TextFieldValue) -> Unit, label: String, modifier: Modifier = Modifier, helperTextParams: HelperTextParams = HelperTextParams.None, characterCounterParams: CharacterCounterParams = CharacterCounterParams.None, enabledState: EnabledState = EnabledState.Enabled, visualTransformation: VisualTransformation = VisualTransformation.None, keyboardOptions: KeyboardOptions = KeyboardOptions.Default.copy(autoCorrectEnabled = false), keyboardActions: KeyboardActions = KeyboardActions.Default, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })(source)

Parameters

value

the input text to be shown in the text field.

onChange

the callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback.

label

the label to be displayed on top of the text field..

modifier

Modifier to be applied to the TextArea.

helperTextParams

Helper text shown below the field used for Error and Success states. Uses HelperTextState.Regular as Default state.

characterCounterParams

Character limit counter values used for how many characters should be allowed in the field and an accessibility message e.g "Max length reached".

enabledState

A state that blocks input and changes the UI when used with ReadOnly and Disabled. Default state is Enabled.

visualTransformation

The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.

keyboardOptions

software keyboard options that contains configuration such as KeyboardType and ImeAction.

keyboardActions

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.

interactionSource

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
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 
   SkapaTheme2(isSystemInDarkTheme()) {
    Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
        // Create a remember mutable TextFieldValue to hold the input field value
        var text by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("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
}

TextArea

Parameters

See also

Samples

Parameters

See also

Samples