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.
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.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
SkapaThemeM3(darkTheme = 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
)
)
}
}
//sampleEnd
}Deprecated
Refactored to make use of IconParams, HelperTextParams and CharacterCounterParams. `enabled` has been replaced by `enabledState`. Use the updated function instead.
Replace with
InputField(value = value,onChange = onChange,label = label,modifier = modifier,prefixLabel = prefixLabel,suffixLabel = suffixLabel,helperTextParams = HelperTextParams(state.toHelperState(), helperText),characterCounterParams = CharacterCounterParams(characterLimit, accessibilityCharacterLimitMessage),enabledState = if (enabled) EnabledState.Enabled else EnabledState.Disabled,visualTransformation = visualTransformation,keyboardOptions = keyboardOptions,keyboardActions = keyboardActions)Input Field enables users to edit text via hardware or software keyboard, providing different decorations such as Label, helper text, prefix and more. 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. Note: If apart from Suffix/Prefix decorator you also want leading or trailing icon use the InputField overload with the IconId parameter instead.
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 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 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.
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.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
SkapaThemeM3(darkTheme = 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
)
)
}
}
//sampleEnd
}Deprecated
Refactored to make use of IconParams, HelperTextParams and CharacterCounterParams. `enabled` has been replaced by `enabledState`. Use the updated function instead.
Replace with
InputField(value = value, onChange = onChange, label = label, modifier = modifier, iconParams = IconParams(iconPosition, iconId, iconContentDescription, iconOnClick), prefixLabel = prefixLabel, suffixLabel = suffixLabel, 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)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.
Resources object to query the image file from.
Will be called when the user clicks the icon. Only allowed for IconPosition.Horizontal.Trailing.
text used by accessibility services to describe what this icon represents. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar.
Modifier to be applied to the InputField.
IconPosition.Horizontal indicates where the icon will be displayed
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 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.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
SkapaThemeM3(darkTheme = 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
)
)
}
}
//sampleEnd
}