Version: Next

TextInput Component

Text fields allow users to enter text into a user interface. They usually appear in forms and dialogs. There are five types of Input Fields: Active, Focus, Filled, Error and Inactive State. Mandatory fields are marked only if there are additional optional fields on the screen. The height of an expanded text field is fixed and the content will scroll once text reaches the max height.

Usage 🔑

Import the necessary components: Ensure you've imported the required OCTextInput Composable and other necessary components at the top of your Kotlin file.

`import androidx.compose.runtime.*
import androidx.compose.ui.*`
// ... other required imports

Use the OCTextInput Composable:
In your UI, you can then add the OCTextInput composable:
`@Composable
fun yourComposable() {`
// ... start

OCTextInput(
label = "Label",
text = "Label",
onTextChange = { newText ->
text.value = newText
},
helperText = "hello",
trailingCloseIcon = R.drawable.icon_right_input_chip_enabled_disabled,
trailingIcon = R.drawable.icon_pill_left_right_placeholder,
trailingCloseIconAction = {
text.value = ""
},
trailingIconAction = {
text.value = ""
},
isMandatory = true,
isExpanded = true,
enabled = false,
isError = true,
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(capitalization =  KeyboardCapitalization.Characters),
keyboardActions = KeyboardActions(
onDone = {
focusManager.clearFocus()
},
),
)

// ... rest of code
`}`

Parameters:

modifier: Modifier = Modifier for styling and layout. label: String = """:The label to be displayed on Text Input Field which is optional. When Text field get focused or Filled the label appears top of the Text Input Field. placeholder: String = "":The placeholder text to be displayed on Text Input Field which is optional. When we start typing it vanished. If no value is given takes the label by default and if label is also null then placeholder text is not rendered. text: String: The input text to be shown in the text field. onTextChange: (String) -> Unit: The callback that is triggered when the user updates the text. An updated text comes as a parameter of the callback. helperText: String = "": The optional helper or error text message to be displayed below the Outlined text field. @DrawableRes trailingCloseIcon: Int? = null: Second Last Trailing icon which is optional and which will usually be a close icon that appears in filled or focused state in [singleLine] = true state. For this icon the size is fixed of 16.dp. @DrawableRes trailingIcon: Int? = null: Last Trailing icon which is optional and which will usually be a displayed in [singleLine] = true state and also in expanded state when the text field is focused. For this icon the size is fixed of 24.dp. trailingCloseIconAction: () -> Unit = : Action that needs to be taken place on clicking trailingCloseIcon. trailingIconAction: () -> Unit = : Action that needs to be taken place on clicking trailingIcon. isMandatory: Boolean = false: Check if the text field is mandatory or not and return Boolean value. isExpanded: Boolean = true: Check if the text field should be expanded or should be [singleLine] = true and based on that return Boolean value. enabled: Boolean = true: Accepts a boolean value which indicate whether the text field needs to be in [Active] or [Inactive] state. isError: Boolean = false: Accepts a boolean value which indicate whether the text field has any error like validation error etc... visualTransformation: VisualTransformation = VisualTransformation.None: Transforms the visual representation of the input value For example, you can use PasswordVisualTransformation to create a password text field. By default, no visual transformation is applied. keyboardOptions: KeyboardOptions = KeyboardOptions.Default: Software keyboard options that contains configuration such as KeyboardType and ImeAction.

Keyboard Options Available // ... start val capitalization: KeyboardCapitalization = KeyboardCapitalization.None: Informs the keyboard whether to automatically capitalize characters, words or sentences. val autoCorrect: Boolean = true: Informs the keyboard whether to enable auto correct. val keyboardType: KeyboardType = KeyboardType.Text: The keyboard type to be used in this text field. Like Number, email, phone, Password etc... val imeAction: ImeAction = ImeAction.Default: The IME action. This IME action is honored by keyboard and may show specific icons on the keyboard. For example, search icon may be shown if ImeAction.Search is specified. When ImeOptions.singleLine is false, the keyboard might show return key rather than the action requested here. // ... end of keyboard options parameter

keyboardActions: KeyboardActions = KeyboardActions.Default: 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.

Keyboard Actions Available // ... start val onDone: (KeyboardActionScope.() -> Unit)? = null: This is run when the user triggers the [Done] ImeAction.Done action. val onGo: (KeyboardActionScope.() -> Unit)? = null: This is run when the user triggers the [Go] ImeAction.Go action. val onNext: (KeyboardActionScope.() -> Unit)? = null: This is run when the user triggers the [Next] ImeAction.Next action. val onPrevious: (KeyboardActionScope.() -> Unit)? = null: This is run when the user triggers the [Previous] ImeAction.Previous action. val onSearch: (KeyboardActionScope.() -> Unit)? = null: This is run when the user triggers the [Search] ImeAction.Search action. val onSend: (KeyboardActionScope.() -> Unit)? = null: This is run when the user triggers the [Send] ImeAction.Send action. // ...end of keyboard actions

textStyle: TextStyle = getDefaultTextStyle(): Dynamic style that can be given to input text labelStyle: TextStyle? = null: Dynamic style that can be given to label text helperStyle: TextStyle? = null: Dynamic style that can be given to helper text colors: Used to resolve the colors used for this text field in different states. It can take text, indicator, container, label, helperText, trailing icon color. If these colors are present it will take user inputted color other wise take the default color. Icon active and inactive colors are only available and not separately for focus, filled and error state. Close icon color is available for user input and user can input single color as it is visible only when text field is in focused or filled state and single line is true.