InputField
This overload of Input Field enables users to edit text via hardware or software keyboard, providing different decorations same decorators plus icons. 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.
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.
Leading och trailing icon with or without clickable actions
Modifier to be applied to the InputField.
Prefix Label can be displayed if it applies to how that data is presented in other contexts.
Suffix Label can be displayed if it applies to how that data is presented in other contexts.
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.
Payment logo parameters to be displayed on the trailing side of the input field. This will override any potential trailing icons.
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.runtime.setValue
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconPosition
import net.ikea.skapa.ui.components.CharacterCounterParams
import net.ikea.skapa.ui.components.EnabledState
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.IconParams
import net.ikea.skapa.ui.components.InputField
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 Input field
InputField(
value = text, // Assign mutable to value parameter
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",
enabledState = EnabledState.Enabled
)
// Simple Input field
InputField(
value = text,
onChange = { text = it },
label = "Label",
helperTextParams = HelperTextParams(
HelperTextState.Regular, label = "Simple Input field with helper text"
)
)
// Input field with Icon
InputField(
value = text,
onChange = { text = it },
label = "Label",
iconParams = IconParams(
IconPosition.Horizontal.Leading, iconId = R.drawable.ic_button_danger,
contentDescription = "Danger",
// iconPosition = IconPosition.Horizontal.Leading, if not set iconPosition default value is Leading
onClick = null // Optional action can be added when interacting with the icon
),
helperTextParams = HelperTextParams(HelperTextState.Regular),
characterCounterParams = CharacterCounterParams(
0, accessibilityCharacterLimitMessage = null
),
enabledState = EnabledState.Enabled
)
// Input field Helper text & counter
InputField(
value = text,
onChange = { text = it },
label = "Label",
prefixLabel = "$", // Instead of Icons, prefix/suffix text can also be added
helperTextParams = HelperTextParams(HelperTextState.Regular, label = "Help Text"),
characterCounterParams = CharacterCounterParams(
characterLimit = 20,
accessibilityCharacterLimitMessage = "Character limit reached" // Add meaningfully message for accessibility
)
)
// Input field with State
InputField(
value = text,
onChange = { text = it },
label = "Label",
iconParams = IconParams(
position = IconPosition.Horizontal.Trailing,
iconId = R.drawable.ic_button_danger,
contentDescription = "Important",
onClick = { /* Do something */ }
),
suffixLabel = "Suffix",
helperTextParams = HelperTextParams(
HelperTextState.Error, label = "Please enter valid text" // Always add related message with the state
)
)
// InputField used for password input using String value type
val iconVisibilityShow = R.drawable.ic_inputfield_visibility_show // Use `SkapaIcons.VisibilityShow.drawableId` instead
val iconVisibilityHide = R.drawable.ic_inputfield_visibility_hide // Use `SkapaIcons.VisibilityHide.drawableId` instead
var passIcon by rememberSaveable { mutableIntStateOf(iconVisibilityShow) }
var passValue by rememberSaveable(stateSaver = TextFieldValue.Saver) { mutableStateOf(TextFieldValue("")) }
var passVisibility by rememberSaveable { mutableStateOf(false) }
var helperState by rememberSaveable { mutableStateOf(HelperTextState.Regular) }
var helperMessage by rememberSaveable { mutableStateOf("4–20 characters") }
InputField(
value = passValue,
onChange = {
passValue = it
helperState = if (passValue.text.length < 4) {
helperMessage = "Password must be at least 4 characters"
HelperTextState.Error
} else {
helperMessage = ""
HelperTextState.Regular
}
},
label = "Password",
iconParams = IconParams(
position = IconPosition.Horizontal.Trailing,
iconId = passIcon,
contentDescription = if (passVisibility) "Hide the password" else "Show the password", // Localizes description
onClick = {
passIcon = if (passVisibility) iconVisibilityHide else iconVisibilityShow
passVisibility = !passVisibility
}
),
helperTextParams = HelperTextParams(helperState, label = helperMessage),
characterCounterParams = CharacterCounterParams(
characterLimit = 20,
accessibilityCharacterLimitMessage = "Character limit reached" // Add meaningfully message for accessibility
),
visualTransformation = if (passVisibility) VisualTransformation.None else PasswordVisualTransformation()
)
}
}
//sampleEnd
}This overload of Input Field enables users to edit text via hardware or software keyboard, providing different decorations same decorators plus icons. 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.
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.
Leading och trailing icon with or without clickable actions
Modifier to be applied to the InputField.
Prefix Label can be displayed if it applies to how that data is presented in other contexts.
Suffix Label can be displayed if it applies to how that data is presented in other contexts.
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.
Payment logo parameters to be displayed on the trailing side of the input field. This will override any potential trailing icons.
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.runtime.setValue
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconPosition
import net.ikea.skapa.ui.components.CharacterCounterParams
import net.ikea.skapa.ui.components.EnabledState
import net.ikea.skapa.ui.components.HelperTextParams
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.IconParams
import net.ikea.skapa.ui.components.InputField
fun main() {
//sampleStart
SkapaTheme2(isSystemInDarkTheme()) {
Column(verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
// Create a remember mutable String
var text by rememberSaveable { mutableStateOf("Hello") }
// Simple Input field
InputField(
value = text, // Assign mutable to value parameter
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",
enabledState = EnabledState.Enabled
)
// Simple Input field
InputField(
value = text,
onChange = { text = it },
label = "Label",
helperTextParams = HelperTextParams(
HelperTextState.Regular, label = "Simple Input field with helper text"
)
)
// Input field with Icon
InputField(
value = text,
onChange = { text = it },
label = "Label",
iconParams = IconParams(
IconPosition.Horizontal.Leading, iconId = R.drawable.ic_button_danger,
contentDescription = "Danger",
// iconPosition = IconPosition.Horizontal.Leading, if not set iconPosition default value is Leading
onClick = null // Optional action can be added when interacting with the icon
),
helperTextParams = HelperTextParams(HelperTextState.Regular),
characterCounterParams = CharacterCounterParams(
0, accessibilityCharacterLimitMessage = null
),
enabledState = EnabledState.Enabled
)
// Input field Helper text & counter
InputField(
value = text,
onChange = { text = it },
label = "Label",
prefixLabel = "$", // Instead of Icons, prefix/suffix text can also be added
helperTextParams = HelperTextParams(HelperTextState.Regular, label = "Help Text"),
characterCounterParams = CharacterCounterParams(
characterLimit = 20,
accessibilityCharacterLimitMessage = "Character limit reached" // Add meaningfully message for accessibility
)
)
// Input field with State
InputField(
value = text,
onChange = { text = it },
label = "Label",
iconParams = IconParams(
position = IconPosition.Horizontal.Trailing,
iconId = R.drawable.ic_button_danger,
contentDescription = "Important",
onClick = { /* Do something */ }
),
suffixLabel = "Suffix",
helperTextParams = HelperTextParams(
HelperTextState.Error, label = "Please enter valid text" // Always add related message with the state
)
)
// Inputfield used for password input
val iconVisibilityShow = R.drawable.ic_inputfield_visibility_show // Use `SkapaIcons.VisibilityShow.drawableId` instead
val iconVisibilityHide = R.drawable.ic_inputfield_visibility_hide // Use `SkapaIcons.VisibilityHide.drawableId` instead
var passIcon by rememberSaveable { mutableIntStateOf(iconVisibilityShow) }
var passValue by rememberSaveable { mutableStateOf("") }
var passVisibility by rememberSaveable { mutableStateOf(false) }
var helperState by rememberSaveable { mutableStateOf(HelperTextState.Regular) }
var helperMessage by rememberSaveable { mutableStateOf("4–20 characters") }
InputField(
value = passValue,
onChange = {
passValue = it
helperState = if (passValue.length < 4) {
helperMessage = "Password must be at least 4 characters"
HelperTextState.Error
} else {
helperMessage = ""
HelperTextState.Regular
}
},
label = "Password",
iconParams = IconParams(
position = IconPosition.Horizontal.Trailing,
iconId = passIcon,
contentDescription = if (passVisibility) "Hide the password" else "Show the password", // Localizes description
onClick = {
passIcon = if (passVisibility) iconVisibilityHide else iconVisibilityShow
passVisibility = !passVisibility
}
),
helperTextParams = HelperTextParams(helperState, label = helperMessage),
characterCounterParams = CharacterCounterParams(
characterLimit = 20,
accessibilityCharacterLimitMessage = "Character limit reached" // Add meaningfully message for accessibility
),
visualTransformation = if (passVisibility) VisualTransformation.None else PasswordVisualTransformation()
)
}
}
//sampleEnd
}