View Source View Index

<AsyncImage>

Overview

<AsyncImage url="http://localhost:4000/example.jpg" />

While the image is loading, a circular progress view is shown. If the image fails to load, text containing the error message is shown. Attributes:

• url
• scale

SwiftUI Documentation

See SwiftUI.AsyncImage for more details on this View.

<Button>

Overview

Use the phx-click attribute to specify which event to fire on tap.

<Button phx-click="my_event" phx-value-extra="more info">Click Me!</Button>

def handle_event("my_event", %{ "extra" => extra }, socket) do
    {:noreply, assign(socket, value: extra)}
end

Attributes

• role

Events

• phx-click

SwiftUI Documentation

See SwiftUI.Button for more details on this View.

<ColorPicker>

Overview

The color is stored as a map with the keys r, g, b, and optionally a.

<ColorPicker selection={@favorite_color} phx-change="color-changed" supportsOpacity>
    Favorite Color
</ColorPicker>

Attributes

supportsOpacity

Bindings

• selection

SwiftUI Documentation

See SwiftUI.ColorPicker for more details on this View.

<ColorView>

Overview

Color’s appearance is equivalent to a Rectangle with a fill-color. Create a color with red, green, blue, and opacity components.

<Color red={1} green={0} blue={0.5} />

A color can also be created by its name. Named colors can be declared in the app’s asset catalog.

<Color name="MyAppColor" opacity={0.5} />

The name attribute can also be used to create a system color or a CSS hex color.

<Color name="system-red" />
<Color name="#ff0000" />

See LiveViewNative/SwiftUI/Color/init(fromNamedOrCSSHex:) for more details.

Attributes

• red
• green
• blue
• name
• opacity
• colorSpace

SwiftUI Documentation

See SwiftUI.ColorView for more details on this View.

<ControlGroup>

Overview

Provide the content and label children to create a control group.

<ControlGroup>
    <Text template={:label}>Edit Actions</Text>
    <Group template={:content}>
        <Button phx-click="arrange">Arrange</Button>
        <Button phx-click="update">Update</Button>
        <Button phx-click="remove">Remove</Button>
    </Group>
</ControlGroup>

Attributes

• style

Children

• label - Describes the content of the control group.
• content - Controls to be grouped together.

<DatePicker>

Overview

The value of this control is an Elixir-style ISO 8601 date or datetime string (i.e., the result of DateTime.to_iso8601).

<DatePicker selection="2023-03-14T15:19:26.535Z">
    <Text>Pick a date</Text>
</DatePicker>

Children of the DatePicker element are used as the label for the control.

Specifying a Date Range

You can optionally specify a start and/or end date to limit the selectable range of the date picker.

Attributes

• selection
• start
• end
• components

SwiftUI Documentation

See SwiftUI.DatePicker for more details on this View.

<DisclosureGroup>

Overview

Use the content and label children to create a disclosure group.

<DisclosureGroup>
    <Text template={:label}>Edit Actions</Text>
    <Group template={:content}>
        <Button phx-click="arrange">Arrange</Button>
        <Button phx-click="update">Update</Button>
        <Button phx-click="remove">Remove</Button>
    </Group>
</DisclosureGroup>

To synchronize the expansion state with the server, use the isExpanded attribute.

<DisclosureGroup isExpanded={@actions_open} phx-change="actions-group-changed">
    ...
</DisclosureGroup>

Bindings

• isExpanded

Children

• label - Describes the content of the disclosure group.
• content - The elements below the fold.

<Form>

Overview

SwiftUI Documentation

See SwiftUI.Form for more details on this View.

<Gauge>

Overview

Several child elements can be used to customize how <Gauge> is displayed.

<Gauge value="0.5">
    <Text template="label">50%</Text>
    <Text template="currentValueLabel">0.5</Text>
    <Text template="minimumValueLabel">0</Text>
    <Text template="maximumValueLabel">1</Text>
</Gauge>

Attributes

• value
• lowerBound
• upperBound

Children

• currentValueLabel - Describes the current value.
• minimumValueLabel - Describes the lowest possible value.
• maximumValueLabel - Describes the highest possible value.

SwiftUI Documentation

See SwiftUI.Gauge for more details on this View.

<Grid>

Overview

Use with <GridRow> to create a structured layout of elements.

<Grid>
    <GridRow>
        <Text>Title</Text>
        <Text>Description</Text>
    </GridRow>
    <GridRow>
        <Text>Item #1</Text>
        <Text>The first of many items.</Text>
    </GridRow>
</Grid>

Attributes

• alignment
• horizontalSpacing
• verticalSpacing

<GridRow>

Overview

Use with <Grid> to define the rows of the grid.

<Grid>
    <GridRow>
        <Text>Title</Text>
        <Text>Description</Text>
    </GridRow>
    <GridRow>
        <Text>Item #1</Text>
        <Text>The first of many items.</Text>
    </GridRow>
</Grid>

Attributes

• alignment

<Group>

Overview

You can use groups to apply modifiers to multiple elements without code duplication.

<Group class="tint-orange">
    <Button>Orange Button</Button>
    <Toggle>Orange Toggle</Toggle>
    <Slider>Orange Slider</Slider>
</Group>

Groups can also be used to surpass the 10 child limit.

<VStack>
    <Group>
        <Text>1</Text>
        <Text>2</Text>
        <Text>3</Text>
        <Text>4</Text>
        <Text>5</Text>
        <Text>6</Text>
        <Text>7</Text>
        <Text>8</Text>
        <Text>9</Text>
        <Text>10</Text>
    </Group>
    <Text>11</Text>
</VStack>

SwiftUI Documentation

See SwiftUI.Group for more details on this View.

<GroupBox>

Overview

Use the label and content children to create a group box.

<GroupBox>
    <Text template={:label}>Edit Actions</Text>
    <Group template={:content}>
        <Button phx-click="arrange">Arrange</Button>
        <Button phx-click="update">Update</Button>
        <Button phx-click="remove">Remove</Button>
    </Group>
</GroupBox>

Alternatively, use the title attribute instead of the label child.

<GroupBox title="Edit Actions">
    <Button phx-click="arrange">Arrange</Button>
    <Button phx-click="update">Update</Button>
    <Button phx-click="remove">Remove</Button>
</GroupBox>

Attributes

• title

Children

• label - Describes the content of the group box.
• content - The elements to group together.

SwiftUI Documentation

See SwiftUI.GroupBox for more details on this View.

<HSplitView>

Overview

Each element in the container will be in a separate resizable section. If the element does not take up all available space, the section will only be able to shrink.

<HSplitView>
    <Rectangle fillColor="system-red" />
    <Rectangle fillColor="system-blue" />
</HSplitView>

SwiftUI Documentation

See SwiftUI.HSplitView for more details on this View.

<HStack>

Overview

<HStack>
    <Text>Leading</Text>
    <Spacer />
    <Text>Trailing</Text>
</HStack>

Attributes

• alignment
• spacing

SwiftUI Documentation

See SwiftUI.HStack for more details on this View.

<ImageView>

Overview

There are two possible sources for images: system-provided images (SF Symbols) or the app’s asset catalog.

SF Symbols

The platform provides a wide variety of symbol images which are specified with the systemName attribute. See Apple’s documentation for more information.

Asset Catalog

Specify the name attribute to use a named image from the app’s asset catalog.

<Image name="MyCustomImage" />

Variable Value

Some symbols and asset images support a value input. Use the variableValue attribute to set this value.

<Image systemName="chart.bar.fill" variableValue={0.3} />
<Image systemName="chart.bar.fill" variableValue={0.6} />
<Image systemName="chart.bar.fill" variableValue={1.0} />

Image Labels

Text content within the image will be used as the accessibility label.

<Image name="landscape">
  Mountain landscape with a lake in the foreground
</Image>

Modifying Images

Use image modifiers to customize the appearance of an image.

"heart" do
    resizable()
    symbolRenderingMode(.multicolor)
end

<Image systemName="heart.fill" class="heart" />

Attributes

• systemName
• name
• variableValue

SwiftUI Documentation

See SwiftUI.ImageView for more details on this View.

<Label>

Overview

Use the title and icon children to create a label.

<Label>
    <Text template={:title}>John Doe</Text>
    <Image template={:icon} systemName="person.crop.circle.fill" />
</Label>

When using a symbol as the icon, use the systemImage attribute.

<Label systemImage="person.crop.circle.fill">
    <Text>John Doe</Text>
</Label>

Attributes

• systemImage

SwiftUI Documentation

See SwiftUI.Label for more details on this View.

<LabeledContent>

Overview

Use the content and label children to create this element.

<LabeledContent>
    <Text template="label">Price</Text>
    <Text template="content">$100.00</Text>
</LabeledContent>

Formatting Values

A value can be automatically formatted when the format attribute is used. In this case, all child elements are used as the label, and the value attribute stores the content. For more details on formatting options, see <Text>.

<LabeledContent value={100} format="currency" currencyCode="usd">
    Price
</LabeledContent>

Attributes

• format

Children

• content - The element to label.
• label - A description of the content.

<LazyHGrid>

Overview

Use the rows attribute to configure the presentation of the grid.

<LazyHGrid
    rows={[
        %{ size: %{ fixed: 100 } },
        %{ size: :flexible },
        %{ size: %{ adaptive: %{ minimum: 50 } } }
    ]}
>
    <%= for i <- 1..50 do %>
        <Text id={i |> Integer.to_string}><%= i %></Text>
    <% end %>
</LazyHGrid>

There are 3 types of grid item:

• fixed(size, spacing, alignment): creates a single row that takes up the specified amount of space.
• flexible(minimum, maximum, spacing, alignment): creates a single row that fills the available space.
• adaptive(minimum, maximum, spacing, alignment): fills the available space with as many rows as will fit.

Attributes

• rows
• alignment
• spacing
• pinnedViews

SwiftUI Documentation

See SwiftUI.LazyHGrid for more details on this View.

<LazyHStack>

Overview

Lazy stacks behave similar to their non-lazy counterparts. Use the pinnedViews attribute to pin section headers/footers when contained in a ScrollView.

<ScrollView axes="horizontal">
    <LazyHStack>
        <%= for i <- 1..50 do %>
            <Text id={i |> Integer.to_string} font="largeTitle"><%= i %></Text>
        <% end %>
    </LazyHStack>
</ScrollView>

Attributes

• alignment
• spacing
• pinnedViews

<LazyVGrid>

Overview

Use the columns attribute to configure the presentation of the grid.

<LazyVGrid
    columns={[
        %{ size: %{ fixed: 100 } },
        %{ size: :flexible },
        %{ size: %{ adaptive: %{ minimum: 50 } } }
    ]}
>
    <%= for i <- 1..50 do %>
        <Text id={i |> Integer.to_string}><%= i %></Text>
    <% end %>
</LazyVGrid>

There are 3 types of grid item:

• fixed(size, spacing, alignment): creates a single column that takes up the specified amount of space.
• flexible(minimum, maximum, spacing, alignment): creates a single column that fills the available space.
• adaptive(minimum, maximum, spacing, alignment): fills the available space with as many columns as will fit.

Attributes

• columns
• alignment
• spacing
• pinnedViews

SwiftUI Documentation

See SwiftUI.LazyVGrid for more details on this View.

<LazyVStack>

Overview

Lazy stacks behave similar to their non-lazy counterparts. Use the pinnedViews attribute to pin section headers/footers when contained in a ScrollView.

<ScrollView axes="vertical">
    <LazyVStack>
        <%= for i <- 1..50 do %>
            <Text id={i |> Integer.to_string} font="largeTitle"><%= i %></Text>
        <% end %>
    </LazyVStack>
</ScrollView>

Attributes

• alignment
• spacing
• pinnedViews

<Link>

Overview

Provide a destination and label content to create a <Link>.

<Link destination="https://native.live">
    Go to <Text class="bold">LiveView Native</Text>
</Link>

Attributes

• destination

SwiftUI Documentation

See SwiftUI.Link for more details on this View.

<List>

Overview

Each element inside the list is given its own row.

<List>
    <%= for sport <- @sports do %>
        <Text id={sport.id}><%= sport.name %></Text>
    <% end %>
</List>

Edit Mode

Use an <EditButton> to enter edit mode. This will allow rows to be moved, selected, and deleted.

<EditButton />
<List> ... </List>

Selecting Rows

Use the selection attribute to set the selected row(s).

<List selection={@selected_sports} phx-change="selection-changed">
    ...
</List>

Deleting and Moving Rows

Set an event name for the phx-delete attribute to enable the system delete action. An event is sent with the index of the item to delete.

<List phx-delete="on_delete">
    ...
</List>

defmodule MyAppWeb.SportsLive do
    def handle_event("on_delete", %{ "index" => index }, socket) do
        {:noreply, assign(socket, :items, List.delete_at(socket.assigns.items, index))}
    end
end

Use the phx-move event to enable the system move actions. An event is sent with the index of the item to move and its destination index.

<List phx-move="on_move">
    ...
</List>

defmodule MyAppWeb.SportsLive do
    def handle_event("on_move", %{ "index" => index, "destination" => destination }, socket) do
        {element, list} = List.pop_at(socket.assigns.sports, index)
        moved = List.insert_at(list, (if destination > index, do: destination - 1, else: destination), element)
        {:noreply, assign(socket, :sports, moved)}
    end
end

Attributes

• selection

Events

• phx-delete
• phx-move

SwiftUI Documentation

See SwiftUI.List for more details on this View.

<Menu>

Overview

Provide the content and label children to create a menu.

<Menu>
    <Text template={:label}>
        Edit Actions
    </Text>
    <Group template={:content}>
        <Button phx-click="arrange">Arrange</Button>
        <Button phx-click="update">Update</Button>
        <Button phx-click="remove">Remove</Button>
    </Group>
</Menu>

Menus can be nested by including another <Menu> in the content.

Children

• label - Describes the content of the menu.
• content - Elements displayed when expanded.

SwiftUI Documentation

See SwiftUI.Menu for more details on this View.

<MultiDatePicker>

Overview

<MultiDatePicker selection={@dates} phx-change="dates-changed" start="2023-01-01" end="2023-02-01">
    <Text>Pick as many dates as you like!</Text>
</MultiDatePicker>

The element’s children are used as the control’s label. The value is a list of date strings of the form “yyyy-MM-dd”.

Attributes

• selection
• start
• end

SwiftUI Documentation

See SwiftUI.MultiDatePicker for more details on this View.

<NamespaceContext>

Overview

Used with MatchedGeometryEffectModifier to create a namespace. The id specified can be passed into MatchedGeometryEffectModifier/namespace on a child of this element.

Attributes

• id

SwiftUI Documentation

See SwiftUI.NamespaceContext for more details on this View.

<NavigationLink>

Overview

This only has an effect if the LiveSessionConfiguration was configured with navigation enabled.

<NavigationLink destination={"/products/#{@product.id}"}>
    <Text>More Information</Text>
</NavigationLink>

Attributes

• destination
• disabled

SwiftUI Documentation

See SwiftUI.NavigationLink for more details on this View.

<PasteButton>

Overview

Use the phx-click attribute to specify which event to fire on tap.

<PasteButton phx-click="my_event" />

def handle_event("my_event", %{ "value" => value }, socket) do
  {:noreply, assign(socket, :pasted_value, hd(value))}
end

Events

• phx-click

SwiftUI Documentation

See SwiftUI.PasteButton for more details on this View.

<Picker>

Overview

The value of a picker is the value of the TagModifier for the selected option. Use the content children to specify the options for the picker, and the label children to provide a label.

<Picker selection={@transport} phx-change="transport-changed">
    <Text template={:label}>Transportation</Text>
    <Group template={:content}>
        <Label systemImage="car" tag="car">Car</Label>
        <Label systemImage="bus" tag="bus">Bus</Label>
        <Label systemImage="tram" tag="tram">Tram</Label>
    </Group>
</Picker>

Attributes

• selection

Children

• content
• label

SwiftUI Documentation

See SwiftUI.Picker for more details on this View.

<ProgressView>

Overview

This element can represent a indeterminate spinner in its most basic form.

<ProgressView />

Use value and total to display a specific value.

<ProgressView value={0.5} />
<ProgressView value={0.5} total={2}>
    <Text template={:label}>Completed Percentage</Text>
    <Text template="currentValueLabel">25%</Text>
</ProgressView>

Create a timer with timerInterval:start and timerInterval:end

<ProgressView
    counts-down
    timerInterval:start={DateTime.utc_now()}
    timerInterval:end={DateTime.utc_now() |> DateTime.add(5, :minute)}
/>

Attributes

• value
• total
• timerInterval:start
• timerInterval:end
• countsDown

Children

• label - Describes the purpose of the element.
• currentValueLabel - Describes the current value.

<ScaledMetric>

Overview

Use this element to scale a value with the accessibility dynamic type size.

<ScaledMetric phx-change="scaled-value-changed" value={100} relativeTo="largeTitle">
  <Image systemName="heart" class="resizable frame-attr" frame={@scaled_value}>
</ScaledMetric>

defmodule MyAppWeb.AccessibilityLive do
  def handle_event("scaled-value-changed", scaled_value, socket) do
    {:noreply, assign(socket, scaled_value: scaled_value)}
  end
end

The initial value of 100 will be used when dynamic type is disabled. If the dynamic type size is changed, the event referenced by phx-change will be updated with a scaled version of value. Optionally provide a LiveViewNative/SwiftUI/Font/TextStyle to scale relative to with the relativeTo attribute.

Attributes

• value
• relativeTo

Bindings

• scaledValue

SwiftUI Documentation

See SwiftUI.ScaledMetric for more details on this View.

<ScrollView>

Overview

<ScrollView>
    <VStack>
        <%= for color <- @colors %>
            <Rectangle id={color} fillColor={color} class="height:100" />
        <% end %>
    </VStack>
</ScrollView>

Attributes

• axes
• showsIndicators
• scrollPosition
• scrollPositionAnchor

SwiftUI Documentation

See SwiftUI.ScrollView for more details on this View.

<Section>

Overview

Use a section to group together elements in <List>, <Picker>, and other container elements.

<Section>
    <Text>Item #1</Text>
    ...
</Section>
<Section>
    <Text>Item #1</Text>
    ...
</Section>

Add a header and footer to customize sections.

<Section>
    <Text template={:header}>Group #1</Text>
    <Text template={:content}>Item #1</Text>
    <Text template={:footer}>The first group ends here</Text>
</Section>
<Section>
    <Text template={:header}>Group #2</Text>
    <Text template={:content}>Item #1</Text>
    <Text template={:footer}>The second group ends here</Text>
</Section>

On macOS, ListStyle/sidebar can have collapsible sections. Use the collapsible attribute to make a section collapsible.

<Section collapsible>
    ...
</Section>

Attributes

• collapsible

Children

• content - The main body of the section.
• header - Describes the content of the section.
• footer - Elements displayed at the end of the section.

SwiftUI Documentation

See SwiftUI.Section for more details on this View.

<SecureField>

Overview

This element is similar to <TextField> but for secure text, such as passwords.

<SecureField prompt="Required" text="password">
    Password
</SecureField>

Attributes

• TextFieldProtocol/text
• TextFieldProtocol/prompt

Events

• focusEvent
• blurEvent

<Shape>

Overview

This view isn’t used directly as an element. Instead, use the shape itself (e.g., <Rectangle>).

Attributes

• fillColor
• strokeColor

<ShareLink>

Overview

Provide an item or list of items to share.

<ShareLink
    item="https://dockyard.com"
    subject="Check out DockYard's website"
    message="Here's a link to the DockYard homepage"
/>

Use a SharePreview element to override the title, image, and icon for an item.

<ShareLink
    item="https://dockyard.com"
    subject="Check out DockYard's website"
    message="Here's a link to the DockYard homepage"
>
    <SharePreview title="DockYard Homepage">
        <Image template={:image} name="dockyard" />
        <Image template={:icon} name="dockyard" />
    </SharePreview>
</ShareLink>

Use a JSON-encoded list of items to share multiple values. Set the item attribute of each SharePreview to connect it to the correct item.

<ShareLink
    items='["https://dockyard.com", "https://news.ycombinator.com", "https://apple.com"]'
    subject="Check out these websites"
    message="Here are links to our favorite websites"
>
    <SharePreview item="https://dockyard.com" title="DockYard">
        <Image template={:image} name="dockyard" />
        <Image template={:icon} name="dockyard" />
    </SharePreview>
    <SharePreview item="https://news.ycombinator.com" title="Hacker News">
        <Image template={:image} name="hackernews" />
        <Image template={:icon} name="hackernews" />
    </SharePreview>
    <SharePreview item="https://apple.com" title="Apple">
        <Image template={:image} name="apple" />
        <Image template={:icon} name="apple" />
    </SharePreview>
</ShareLink>

Attributes

• subject
• message
• items
• item

<Slider>

Overview

By default, sliders choose values in the range 0-1.

<Slider value="progress" />

Use lowerBound and upperBound to specify the range of possible values.

<Slider
    value="progress"
    lowerBound={-1}
    upperBound={2}
/>

Use the step attribute to set the distance between valid values.

<Slider
    value="progress"
    lowerBound={0}
    upperBound={10}
    step={1}
/>

Customize the appearance of the slider with the children label, minimum-value-label and maximum-value-label.

<Slider value="value">
    <Text template="label">Percent Completed</Text>
    <Text template="minimumValueLabel">0%</Text>
    <Text template="maximumValueLabel">100%</Text>
</Slider>

Attributes

• value
• lowerBound
• upperBound
• step

Children

• label
• minimumValueLabel
• maximumValueLabel

<Spacer>

Overview

<VStack>
    <Text>First</Text>
    <Spacer minLength="50" />
    <Text>Second</Text>
</VStack>

Within horizontal and vertical stacks, the spacer only grows along the stack’s axis. Otherwise, the spacer grows in both axes.

Attributes

• minLength

SwiftUI Documentation

See SwiftUI.Spacer for more details on this View.

<Stepper>

Overview

This element displays buttons for incrementing/decrementing a value by a step amount.

<Stepper value="attendees">
    Attendees
</Stepper>

Use lowerBound and upperBound to limit the value. The step attribute customizes the amount the value changes.

<Stepper
    value="attendees"
    lowerBound={0}
    upperBound={16}
    step={2}
>
    Attendees
</Stepper>

Attributes

• value
• step
• lowerBound
• upperBound

<TabView>

Overview

Each child element will become its own tab.

<TabView class="tab-view-style-page">
    <Rectangle fillColor="system-red" />
    <Rectangle fillColor="system-red" />
    <Rectangle fillColor="system-red" />
</TabView>

The icon shown in the index view can be configured with the TabItemModifier modifier.

Bindings

• selection

SwiftUI Documentation

See SwiftUI.TabView for more details on this View.

<Table>

Overview

Use <TableColumn> elements in the columns child, and <TableRow> elements in the rows child to build the table’s content. Each <TableRow> should have the same number of children as columns in the table.

<Table>
    <Group template={:columns}>
        <TableColumn id="name">Name</TableColumn>
        <TableColumn id="description">Description</TableColumn>
        <TableColumn id="length">Length</TableColumn>
    </Group>
    <Group template={:rows}>
        <TableRow id="basketball">
            <Text>Basketball</Text>
            <Text>Players attempt to throw a ball into an elevated basket.</Text>
            <Text>48 min</Text>
        </TableRow>
        <TableRow id="soccer">
            <Text>Soccer</Text>
            <Text>Players attempt to kick a ball into a goal.</Text>
            <Text>90 min</Text>
        </TableRow>
        <TableRow id="football">
            <Text>Football</Text>
            <Text>Players attempt to throw a ball into an end zone.</Text>
            <Text>60 min</Text>
        </TableRow>
    </Group>
</Table>

Sorting Tables

Use the sortOrder attribute to handle changes in the sorting options.

<Table sortOrder={@sports_sort_order} phx-change="sort-changed">
    ...
    <Group template={:rows}>
        <%= for sport <- Enum.sort_by(
            @sports,
            fn sport -> sport[hd(@sports_sort_order)["id"]] end,
            (if hd(@sports_sort_order)["order"], do: &</2, else: &>/2)
        ) do %>
            <TableRow id={sport["id"]}>
                <Text><%= sport["name"] %></Text>
                <Text><%= sport["description"] %></Text>
                <Text><%= sport["length"] %></Text>
            </TableRow>
        <% end %>
    </Group>
</Table>

Selecting Rows

Use the selection attribute to synchronize the selected row(s) with the LiveView.

<Table selection={@selected_sports} phx-change="selection-changed">
    ...
</Table>

Bindings

• selection
• sortOrder

Children

• columns - Up to 10 <TableColumn> elements that describe the possible columns.
• rows - An arbitrary number of <TableRow> elements, each with a unique id attribute.

<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 LiveViewNative/SwiftUI/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.

<TextEditor>

Overview

<TextEditor text="my_text" phx-focus="editor_focused" />

Events

• focusEvent
• blurEvent

SwiftUI Documentation

See SwiftUI.TextEditor for more details on this View.

<TextField>

Overview

Any children of the field will be used as the label.

<TextField text="first_name">
    First Name
</TextField>

You can style the label by using elements inside.

<TextField text="last_name">
    <Text fontWeight="bold" font="caption">Last Name</Text>
</TextField>

Input Configuration

Use modifiers to configure how text is input.

"search-field" do
  autocorrectDisabled(true)
  textInputAutocapitalization(.words)
  keyboardType(.webSearch)
  submitLabel(.search)
end

<TextField
    text="value"
    class="search-field"
>
    Enter Search Text
</TextField>

Formatting Values

Use the phx-focus attribute to input values such as numbers and URLs.

<VStack>
    <TextField
        text="amount"
        format="currency"
        currencyCode="usd"
        class="decimal-pad"
    >
        Enter Amount
    </TextField>

    <TextField
        text="bank_address"
        axis="vertical"
    >
        Enter Bank Address
    </TextField>
</VStack>

Secure Input

To input private text, such as a password, use <SecureField>.

Attributes

• text
• phx-focus
• currencyCode
• nameStyle
• TextFieldProtocol/axis
• TextFieldProtocol/prompt

Events

• focusEvent
• blurEvent

<TextFieldLink>

Overview

This element displays a button that, when tapped, opens a dialogue for inputting text.

<TextFieldLink prompt="Favorite Color" value="color">
    What's your favorite color?
</TextFieldLink>

Attributes

• prompt
• value

<TextFieldProtocol>

<Toggle>

Overview

Add elements within the toggle to provide a label.

<Toggle isOn={@lights_on} phx-change="toggled-lights">
    Lights On
</Toggle>

<ToolbarItem>

Overview

Optionally specify a placement to reposition the element.

<ToolbarItem placement="destructiveAction">
    <Button phx-click="delete">Delete</Button>
</ToolbarItem>

Customizable Items

A customizable toolbar is a toolbar modifier with an id.

toolbar(id: "unique-toolbar-id", content: :my_toolbar_content)

Set the id attribute to a unique value on each customizable item.

<ToolbarItem id="delete">
    ...
</ToolbarItem>

To prevent customization of an item in a customizable toolbar, set the customizationBehavior attribute to disabled.

<ToolbarItem id="delete" customizationBehavior="disabled">
    ...
</ToolbarItem>

The default visibility and options can be configured with the defaultVisibility and alwaysAvailable attributes.

<ToolbarItem id="delete" defaultVisibility="hidden" alwaysAvailable>
    ...
</ToolbarItem>

Attributes

• placement
• id
• defaultVisibility
• alwaysAvailable
• customizationBehavior

<ToolbarItemGroup>

Overview

Optionally specify a placement to reposition the elements.

<ToolbarItemGroup placement="destructiveAction">
    <Button phx-click="delete">Delete</Button>
    <Button phx-click="destroy">Destroy</Button>
    <Button phx-click="eradicate">Eradicate</Button>
</ToolbarItemGroup>

Attributes

• placement

<ToolbarTitleMenu>

Overview

On iOS, the menu can be opened by tapping the inline navigation bar title.

<ToolbarTitleMenu>
    <Button phx-click="edit">Edit</Button>
    <Button phx-click="save">Save</Button>
    <Button phx-click="open">Open</Button>
</ToolbarTitleMenu>

<VSplitView>

Overview

Each element in the container will be in a separate resizable section. If the element does not take up all available space, the section will only be able to shrink.

<VSplitView>
    <Rectangle fillColor="system-red" />
    <Rectangle fillColor="system-blue" />
</VSplitView>

SwiftUI Documentation

See SwiftUI.VSplitView for more details on this View.

<VStack>

Overview

<VStack>
    <Text>Top</Text>
    <Text>Bottom</Text>
</VStack>

Attributes

• alignment
• spacing

SwiftUI Documentation

See SwiftUI.VStack for more details on this View.

<ViewThatFits>

Overview

Child elements are evaluated in order, and the first child that fits in the available space along axes is displayed.

<ViewThatFits>
    <Text>Long text content ... </Text>
    <Image systemName="doc.text" />
</ViewThatFits>

In the above example, if the text content is too large to fit on screen the icon will be displayed instead.

Attributes

• axes

SwiftUI Documentation

See SwiftUI.ViewThatFits for more details on this View.

<ZStack>

Overview

<ZStack>
    <Text>Back</Text>
    <Text>Front</Text>
</ZStack>

Attributes

• alignment

SwiftUI Documentation

See SwiftUI.ZStack for more details on this View.

Types