Fallback

The fallback component renders a given value unless it is empty, in which case it renders a fallback value instead.

Read more Read less

The values nil, "", [] and %{} are treated as empty values.

This component optionally applies a formatter function to non-empty values.

The primary purpose of this component is to enhance accessibility. In situations where a value in a table column or property list is set to be invisible or not displayed, it’s crucial to provide an alternative text for screen readers.

Usage

Render the value of @some_value if it’s available, or display the default placeholder otherwise:

<.fallback value={@some_value} />

Apply a formatter function to @some_value if it is not nil:

<.fallback value={@some_value} formatter={&format_date/1} />

Set a custom placeholder and text for screen readers:

<.fallback
  value={@some_value}
  placeholder="n/a"
  accessibility_text="not available"
/>
George -
<.fallback value="George"/>
<.fallback value={nil}/>
1969777204 -
<.fallback value={~U[2032-06-02 08:20:04Z]} formatter={&DateTime.to_unix/1}/>
<.fallback value={nil} formatter={&DateTime.to_unix/1}/>
Mary n/a
<.fallback value="Mary" placeholder="n/a" accessibility_text="not available"/>
<.fallback value="" placeholder="n/a" accessibility_text="not available"/>