Label

KLabel provides a wrapper around the native HTML label element.

Input title

<KLabel>Input title</KLabel>

Props

info

Use the info prop to display information help text.

Input title

This is an example

<KLabel info="This is an example">Input title</KLabel>

required

Use this prop on labels for required fields. Adds a red dot in front of a label.

Name

<KLabel required>Name</KLabel>

tooltipAttributes

Use the tooltipAttributes prop to configure the KTooltip's props if using the info prop.

With Tooltip Attributes

This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs

<KLabel
  :tooltip-attributes="{ placement: 'right', 'max-width': '200' }"
  info="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs"
>
  With Tooltip Attributes
</KLabel>

Attribute Binding

for

Use the for attribute to bind a label to an input element for accessibility.

Service name

A service is an API that you want to offer

<KLabel for="service" info="A service is an API that you want to offer">Service name</KLabel>
<KInput id="service"/>

Slots

default

Label content.

Label Text

<KLabel>Label Text</KLabel>

tooltip

Should you need to utilize HTML in the tooltip, you may use the tooltip slot.

My Tooltip

Brings all the devs to the yard

<KLabel>
  My Tooltip
  <template #tooltip>Brings all the <code>devs</code> to the yard</template>
</KLabel>
<KInput />