OudsTextArea
Text area is a UI element that allows to type, edit, or select longer blocks of textual data, such as comments, messages or descriptions; by expanding vertically and offering more space to input text. Text area includes features like a visible label, placeholder text, character limits and resize behavior; and is ideal for open-ended responses where users need to express detailed information.
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.
It is recommended to use state-based text areas rather than value-based ones, as they provide a more complete and reliable approach to managing the state of a text area.
This variant, unlike the others, enables a vertical scrollbar when the input text exceeds the text area's maximum capacity.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.1.0 |
Parameters
The editable text state of the text area, including both the text itself and position of the cursor or selection.
Modifier applied to the text area.
Label displayed above the text area. It describes the purpose of the input.
Text displayed when the text area is empty. It provides a hint or guidance inside the field to suggest expected input.
Controls the enabled state of the text area. When false, this text area will not be focusable and will not react to input events. True by default.
Controls the read-only state of the text area. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the text area to indicate an ongoing operation.
Controls the style of the text area. When true, it displays a minimalist text area with a transparent background and a visible stroke outlining the field.
Optional OudsError to indicate that the user input does not meet validation rules or expected formatting. Pass null if there is no error.
An optional helper text displayed below the text area. 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 it may wrap to multiple lines if required.
An optional helper link displayed below or in place of the helper text.
When true, the text area width is constrained to a maximum value defined by the design system. When false, no specific width constraint is applied, allowing the component to size itself or follow external modifiers. Defaults to false.
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 area. Note that if null is provided, interactions will still happen internally.
Samples
OudsTextArea(
textFieldState = rememberTextFieldState(),
label = "Label",
placeholder = "Placeholder",
loader = OudsTextInputLoader(null),
helperText = "Helper text",
helperLink = OudsTextInputHelperLink(text = "Helper link", onClick = { })
)OudsTextArea(
textFieldState = rememberTextFieldState(),
label = "Label",
placeholder = "Placeholder",
outlined = true,
error = OudsError(message = "This field can't be empty.")
)Text area is a UI element that allows to type, edit, or select longer blocks of textual data, such as comments, messages or descriptions; by expanding vertically and offering more space to input text. Text area includes features like a visible label, placeholder text, character limits and resize behavior; and is ideal for open-ended responses where users need to express detailed information.
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.
It is recommended to use state-based text areas rather than value-based ones, as they provide a more complete and reliable approach to managing the state of a text area.
Note: This variant does not support a vertical scrollbar. For scrollbar functionality when text exceeds the available space, please use the state-based version of OudsTextArea.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.1.0 |
Parameters
Input text to be shown in the text area.
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 area.
Label displayed above the text area. It describes the purpose of the input.
Text displayed when the text area is empty. It provides a hint or guidance inside the field to suggest expected input.
Controls the enabled state of the text area. When false, this text area will not be focusable and will not react to input events. True by default.
Controls the read-only state of the text area. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the text area to indicate an ongoing operation.
Controls the style of the text area. When true, it displays a minimalist text area with a transparent background and a visible stroke outlining the field.
Optional OudsError to indicate that the user input does not meet validation rules or expected formatting. Pass null if there is no error.
An optional helper text displayed below the text area. 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 it may wrap to multiple lines if required.
An optional helper link displayed below or in place of the helper text.
When true, the text area width is constrained to a maximum value defined by the design system. When false, no specific width constraint is applied, allowing the component to size itself or follow external modifiers. Defaults to false.
Software keyboard options that contain 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 area. Note that if null is provided, interactions will still happen internally.
Samples
var value by remember { mutableStateOf("Text content") }
OudsTextArea(
value = value,
onValueChange = { value = it },
label = "Label",
placeholder = "Placeholder",
loader = OudsTextInputLoader(null),
helperText = "Helper text",
helperLink = OudsTextInputHelperLink(text = "Helper link", onClick = { })
)var value by remember { mutableStateOf("") }
OudsTextArea(
value = value,
onValueChange = { value = it },
label = "Label",
placeholder = "Placeholder",
outlined = true,
error = OudsError(message = "This field can't be empty.")
)Text area is a UI element that allows to type, edit, or select longer blocks of textual data, such as comments, messages or descriptions; by expanding vertically and offering more space to input text. Text area includes features like a visible label, placeholder text, character limits and resize behavior; and is ideal for open-ended responses where users need to express detailed information.
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.
It is recommended to use state-based text areas rather than value-based ones, as they provide a more complete and reliable approach to managing the state of a text area.
Note: This variant does not support a vertical scrollbar. For scrollbar functionality when text exceeds the available space, please use the state-based version of OudsTextArea.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.1.0 |
Parameters
The androidx.compose.ui.text.input.TextFieldValue to be shown in the text area.
Called when the input service updates the values in TextFieldValue.
Modifier applied to the text area.
Label displayed above the text area. It describes the purpose of the input.
Text displayed when the text area is empty. It provides a hint or guidance inside the field to suggest expected input.
Controls the enabled state of the text area. When false, this text area will not be focusable and will not react to input events. True by default.
Controls the read-only state of the text area. When true, the text is visible but not editable. False by default.
An optional loading progress indicator displayed in the text area to indicate an ongoing operation.
Controls the style of the text area. When true, it displays a minimalist text area with a transparent background and a visible stroke outlining the field.
Optional OudsError to indicate that the user input does not meet validation rules or expected formatting. Pass null if there is no error.
An optional helper text displayed below the text area. 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 it may wrap to multiple lines if required.
An optional helper link displayed below or in place of the helper text.
When true, the text area width is constrained to a maximum value defined by the design system. When false, no specific width constraint is applied, allowing the component to size itself or follow external modifiers. Defaults to false.
Software keyboard options that contain 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 area. Note that if null is provided, interactions will still happen internally.
Samples
var value by remember { mutableStateOf("Text content") }
OudsTextArea(
value = value,
onValueChange = { value = it },
label = "Label",
placeholder = "Placeholder",
loader = OudsTextInputLoader(null),
helperText = "Helper text",
helperLink = OudsTextInputHelperLink(text = "Helper link", onClick = { })
)var value by remember { mutableStateOf("") }
OudsTextArea(
value = value,
onValueChange = { value = it },
label = "Label",
placeholder = "Placeholder",
outlined = true,
error = OudsError(message = "This field can't be empty.")
)