OudsTextInput
A Text Input is a user interface component that allows users to enter, edit, or select single-line textual data. It's one of the most fundamental form elements used to capture user input such as names, emails, passwords, or search queries.
It provides a visual and interactive affordance for text entry while supporting labels, placeholders, icons, helper messages, and validation feedback.
Rounded corners can be enabled or disabled using OudsThemeSettings.roundedCornerTextInputs property in the settings of the theme provided when calling the com.orange.ouds.core.theme.OudsTheme method.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.3.0 |
Parameters
The editable text state of the text input, including both the text itself and position of the cursor or selection.
Modifier applied to the text input.
Label displayed above the text input. It describe the purpose of the input.
Text displayed when the text input is empty. It provides a hint or guidance inside the field to suggest expected input.
An optional leading icon displayed at the start of the text input. It helps indicate the purpose of the input (magnifying glass for search, envelope for email, etc.). Only use a leading icon if it adds clear functional or contextual value.
An optional trailing icon button displayed at the end of the text input. It is used to provide actions related to the field: clear input, toggle password visibility, etc. It can also indicate status or feedback (error checkmark, loading spinner).
Text placed before the user's input. Commonly used to indicate expected formatting like a country code, a unit...
Text placed after the user's input, often used to display a currency or a unit (kg, %, cm…).
Controls the enabled state of the text input. When false, this text input will not be focusable and will not react to input events. True by default.
Controls the read-only state of the text input. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the text input to indicate an ongoing operation.
Controls the style of the text input. When true, it displays a minimalist text input with a transparent background and a visible stroke outlining the field.
Optional OudsError to provide in the case of the text input item should appear in error state to indicate that the user input does not meet validation rules or expected formatting, null otherwise.
An optional helper text displayed below the text input. It conveys additional information about the input field, such as how it will be used. It should ideally only take up a single line, though may wrap to multiple lines if required.
An optional helper link displayed below or in place of the helper text.
Software keyboard options that contain configurations such as KeyboardType and ImeAction.
Called when the user presses the action button in the input method editor (IME), or by pressing the enter key on a hardware keyboard. By default this parameter is null, and would execute the default behavior for a received IME Action e.g., ImeAction.Done would close the keyboard, ImeAction.Next would switch the focus to the next focusable item on the screen.
Callback that is executed when the text layout becomes queryable. The callback receives a function that returns a TextLayoutResult if the layout can be calculated, or null if it cannot. The function reads the layout result from a snapshot state object, and will invalidate its caller when the layout result changes. A TextLayoutResult object contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw a cursor or selection around the text. Density scope is the one that was used while creating the given text layout.
An optional InputTransformation that will be used to transform changes to the TextFieldState made by the user. The transformation will be applied to changes made by hardware and software keyboard events, pasting or dropping text, accessibility services, and tests. The transformation will not be applied when changing the textFieldState programmatically, or when the transformation is changed. If the transformation is changed on an existing text field, it will be applied to the next user edit. the transformation will not immediately affect the current textFieldState.
An optional OutputTransformation that transforms how the contents of the text field are presented.
An optional hoisted MutableInteractionSource for observing and emitting Interactions for this text input. Note that if null is provided, interactions will still happen internally.
A Text Input is a user interface component that allows users to enter, edit, or select single-line textual data. It's one of the most fundamental form elements used to capture user input such as names, emails, passwords, or search queries.
It provides a visual and interactive affordance for text entry while supporting labels, placeholders, icons, helper messages, and validation feedback.
Rounded corners can be enabled or disabled using OudsThemeSettings.roundedCornerTextInputs property in the settings of the theme provided when calling the com.orange.ouds.core.theme.OudsTheme method.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.3.0 |
Parameters
Input text to be shown in the text field.
Callback that is triggered when the input service updates the text. An updated text comes as a parameter of the callback.
Modifier applied to the text input.
Label displayed above the text input. It describe the purpose of the input.
Text displayed when the text input is empty. It provides a hint or guidance inside the field to suggest expected input.
An optional leading icon displayed at the start of the text input. It helps indicate the purpose of the input (magnifying glass for search, envelope for email, etc.). Only use a leading icon if it adds clear functional or contextual value.
An optional trailing icon button displayed at the end of the text input. It is used to provide actions related to the field: clear input, toggle password visibility, etc. It can also indicate status or feedback (error checkmark, loading spinner).
Text placed before the user's input. Commonly used to indicate expected formatting like a country code, a unit...
Text placed after the user's input, often used to display a currency or a unit (kg, %, cm…).
Controls the enabled state of the text input. When false, this text input will not be focusable and will not react to input events. True by default.
Controls the read-only state of the text input. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the text input to indicate an ongoing operation.
Controls the style of the text input. When true, it displays a minimalist text input with a transparent background and a visible stroke outlining the field.
Optional OudsError to provide in the case of the text input item should appear in error state to indicate that the user input does not meet validation rules or expected formatting, null otherwise.
An optional helper text displayed below the text input. It conveys additional information about the input field, such as how it will be used. It should ideally only take up a single line, though may wrap to multiple lines if required.
An optional helper link displayed below or in place of the helper text.
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.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw a cursor or selection around the text.
The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.
An optional hoisted MutableInteractionSource for observing and emitting Interactions for this text input. Note that if null is provided, interactions will still happen internally.
A Text Input is a user interface component that allows users to enter, edit, or select single-line textual data. It's one of the most fundamental form elements used to capture user input such as names, emails, passwords, or search queries.
It provides a visual and interactive affordance for text entry while supporting labels, placeholders, icons, helper messages, and validation feedback.
Rounded corners can be enabled or disabled using OudsThemeSettings.roundedCornerTextInputs property in the settings of the theme provided when calling the com.orange.ouds.core.theme.OudsTheme method.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.3.0 |
Parameters
The androidx.compose.ui.text.input.TextFieldValue to be shown in the text input.
Called when the input service updates the values in TextFieldValue.
Modifier applied to the text input.
Label displayed above the text input. It describe the purpose of the input.
Text displayed when the text input is empty. It provides a hint or guidance inside the field to suggest expected input.
An optional leading icon displayed at the start of the text input. It helps indicate the purpose of the input (magnifying glass for search, envelope for email, etc.). Only use a leading icon if it adds clear functional or contextual value.
An optional trailing icon button displayed at the end of the text input. It is used to provide actions related to the field: clear input, toggle password visibility, etc. It can also indicate status or feedback (error checkmark, loading spinner).
Text placed before the user's input. Commonly used to indicate expected formatting like a country code, a unit...
Text placed after the user's input, often used to display a currency or a unit (kg, %, cm…).
Controls the enabled state of the text input. When false, this text input will not be focusable and will not react to input events. True by default.
Controls the read-only state of the text input. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the text input to indicate an ongoing operation.
Controls the style of the text input. When true, it displays a minimalist text input with a transparent background and a visible stroke outlining the field.
Optional OudsError to provide in the case of the text input item should appear in error state to indicate that the user input does not meet validation rules or expected formatting, null otherwise.
An optional helper text displayed below the text input. It conveys additional information about the input field, such as how it will be used. It should ideally only take up a single line, though may wrap to multiple lines if required.
An optional helper link displayed below or in place of the helper text.
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.
Callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw a cursor or selection around the text.
The visual transformation filter for changing the visual representation of the input. By default no visual transformation is applied.
An optional hoisted MutableInteractionSource for observing and emitting Interactions for this text input. Note that if null is provided, interactions will still happen internally.