The KOptionalText component is a wrapper for KEmptyPlaceholder used in situations where a text can be missing. If the text exists and is not empty, the text will be rendered, if not, a wide, light-gray dash will be rendered, like this:

Using the KOptionalText component is preferred to leaving a empty or blank space because it communicates to the user that a value could possibly exist there, and aids with visual scanning in tables, grids, and lists of data.

Example using props

In the example below, an average score cannot be calculated until the user has attempted at least one exercise:

Username Number of exercises Average score
user_1 11 9%
user_2 0
user_3 5 100%

For this example, `text` prop is used to pass in the text to be displayed. If the text is empty or undefined, the placeholder will be displayed:

  <KOptionalText text="9%" :appearanceOverrides="{ color: 'red' }" />
  <KOptionalText text="" /> <!-- empty string, show placeholder -->

Example using slot

In the example below, it displays user information, highlighting the user's last name, but first and last names are optional:

  • Id: 1
  • Name: 
  • ...

An example of a user that has a first and last name:

  • Id: 2
  • Name:  Peter Jhonson
  • ...

For this example, component slot is used to pass in some spans to be displayed. Slots can be used when there is a more complex structure to be displayed.

    <span> {{ user.name }} </span>
    <span class="highlight"> {{ user.lastname }} </span>


Name Description Type Default Required
Text to display. If the text is missing or empty, then KEmptyPlaceholder will be rendered
string null
If provided, sets the styles of the text
object|string null


Name Description
Pass sub-components to render, if none of the nodes in the entire node hierarchy contain text, then the KEmptyPlaceholder component will be rendered