Structure

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. It provides a visual and interactive affordance for multiline text entry while supporting labels, placeholders, descriptions, and validation feedback.

iOS 15.0+
macOS 13.0+
visionOS 1.0+

@MainActor struct OUDSTextArea

Mentioned In

Controls

Layout

Text area is based on several configurable UI elements:

label: It is used to describe the purpose of the text area. In some UI contexts, especially when space is limited or when the text area is part of a compact layout, the label can be hidden. However, hiding the label should only be done if the purpose remains clear thanks to a placeholder or contextual icon and if the label is still accessible to screen readers. Hiding a label is a design choice that must balance visual simplicity and clarity of intent, without compromising inclusiveness or form guidance.
placeholder: If the text of the text area is empty a placeholder provides a hint or guidance inside the field to suggest expected input.

Status

Five status are proposed for all layouts:

enabled (by default): Default neutral appearance, whether empty or filled. It allows users to click, focus, and type freely without restrictions.
error: The error status indicates that the user input does not meet validation rules or expected formatting. It provides immediate visual feedback, typically through a red border, an error icon, and a clear, accessible error message positioned below the text area. The error message replaces the helper text.
loading: The loading state indicates that the system is processing or retrieving data related to the text entered. A progress indicator appears to inform the user that an action is in progress. The field remains editable while loading.
readOnly: The readOnly status lets the text visible but not editable.
disabled: In disabled status, the field is non-interactive and grayed out to indicate it cannot be changed. Note the SwiftUI View.disabled() is ignored.

Helpers

Helper text (plain): A supporting text conveys additional information about the text area, such as how it will be used. It should ideally only take up a single line, though may wrap to multiple lines if required, and be either persistently visible or visible only on focus.
Helper text (characters max count): Uses an internal message displaying the count of remaining characters depending to the given value. This is a specific iOS library feature with 1.4.0
Helper link: If the helper text is not sufficient, it’s possible to offer the user an additional help link (the link can be external or open a modal).

Accessibility considerations

By default no haptics are done by the component. However you should think about cases where you will have to make the devices vibrate. You can refer to the Human Interface Guidelines of Apple.

Mandatory field indication

If all fields are mandatory (several fields present): display the message “All fields are mandatory” at the top of your formular. Do not use an asterisk at the end of each field label, nor the word “mandatory.”

If not all fields are mandatory (several fields present): display the message “All fields marked with an * are mandatory” at the top of your formular. Use an asterisk (*) at the end of each mandatory field label, and ensures this is well vocalized.

UI rendering of the asterisk must be done with bold font weight and negative content color (red on light backgrounds).

Use the mention “(optional)” at the end of each optional field label. Note that this rule is not systematic, it remains an option, to be used if needed.

If there is only one field in the formular, or if the mandatory nature is obvious, no mention is necessary since the fields are essential to the formular’s functionality.

Outlined style

By default, the text area uses a subtle background fill and a bottom border only, creating a softer and more contained look.

When outlined, the text area uses a transparent background and a visible stroke on all four sides. This style may be appropriate for contexts where inputs need to feel lightweight and unobtrusive, for example inside a card, a dialog, or a filtering panel.

    // An outlined text area
    OUDSTextArea(label: "Comments", text: $text, isOutlined: true)

Rich text

Rich text can be used for error and helper texts.

Strong text can be used sparingly to highlight key information within the content. No other text styles should be used. Underlined text must not be applied manually (e.g. in error message), as it is commonly associated with hyperlinks and may mislead users.

Code samples

    // The text to display and edit
    @State var text: String = ""

    // Empty text and no placeholder
    OUDSTextArea(label: "Comments", text: $text)

    // Empty text with placeholder
    OUDSTextArea(label: "Comments", text: $text, placeholder: "Describe your issue in detail")

    // With a plain helper text
    OUDSTextArea(label: "Comments",
                 text: $text,
                 placeholder: "Describe your issue in detail",
                 helperText: .plain("Maximum 500 characters."))

    // With a maximum character count — the component shows "X characters remaining" (bold)
    // and switches to an error style when exceeded.
    OUDSTextArea(label: "Comments",
                 text: $text,
                 helperText: .charactersMaxCount(500))

    // With helper link
    @Environment(\.openURL) private var openUrl

    let helperLink = OUDSTextArea.Helperlink(text: "Helper Link") {
       openUrl.callAsFunction(url)
    }

    OUDSTextArea(label: "Comments", text: $text, placeholder: "Placeholder", helperLink: helperLink)

    // With error status
    OUDSTextArea(label: "Comments", text: $text, status: .error(message: "This field can't be empty."))

    // Outlined style
    OUDSTextArea(label: "Comments", text: $text, isOutlined: true)

Design documentation

unified-design-system.orange.com

Themes rendering

Orange

A text area component in light and dark modes with Orange theme

Orange Compact

A text area component in light and dark modes with Orange Compact theme

Sosh

A text area component in light and dark modes with Sosh theme

Wireframe

A text area component in light and dark modes with Wireframe theme

Version
1.1.0 (Figma component design version)

Since
1.4.0

Topics

Structures

struct Helperlink
Used to describe the helper link below the text area.

Initializers

Instance Properties

var body: some View