View Source Text

<Text>

Displays text.

Overview

There are a number of modes for displaying text.

Raw Strings

Using text content or the verbatim attribute will display the given string.

<Text>Hello</Text>
<Text verbatim="Hello"/>

Dates

Provide an ISO 8601 date (with optional time) in the date attribute, and optionally a Text.DateStyle in the dateStyle attribute. Valid date styles are date (default), time, relative, offset, and timer. The displayed date is formatted with the user’s locale.

<Text date="2023-03-14T15:19:00.000Z" dateStyle="date"/>

Date Ranges

Displays a localized date range between the given ISO 8601-formatted dateStart and dateEnd.

<Text date:start="2023-01-01" date:end="2024-01-01"/>

Markdown

The value of the markdown attribute is parsed as Markdown and displayed. Only inline Markdown formatting is shown.

<Text markdown="Hello, *world*!" />

Formatted Values

A value should provided in the value attribute, or in the inner text of the element. The value is formatted according to the format attribute:

  • dateTime: The value is an ISO 8601 date (with optional time).
  • url: The value is a URL.
  • iso8601: The value is an ISO 8601 date (with optional time).
  • number: The value is a Double. Shown in a localized number format.
  • percent: The value is a Double.
  • currency: The value is a Double and is shown as a localized currency value using the currency specified in the currencyCode attribute.
  • name: The value is a string interpreted as a person’s name. The nameStyle attribute determines the format of the name and may be short, medium (default), long, or abbreviated.
<Text value={15.99} format="currency" currencyCode="usd" />
<Text value="Doe John" format="name" nameStyle="short" />

Formatting Text

Use text modifiers to customize the appearance of text.

"large-bold" do
    font(.largeTitle)
    bold()
end
<Text class="large-bold">
    Hello, world!
</Text>

Nesting Elements

Certain elements may be nested within a <Text>.

  • <Text>: Text elements can be nested to adjust the formatting for only particular parts of the text.
  • <Link>: Allows tappable links to be included in text.
  • Image: Embeds images in the text.
<Text>
    <Image systemName="person.crop.circle.fill" /><Text value="Doe John" format="name" class="blue bold" />
    <Text verbatim={"\n"} />
    Check out this thing I made: <Link destination="mysite.com">mysite.com</Link>
</Text>

Attributes

  • verbatim
  • markdown
  • date
  • dateStart
  • dateEnd
  • value
  • format
  • currencyCode
  • nameStyle
  • dateStyle

SwiftUI Documentation

See SwiftUI.Text for more details on this View.