Skip to content
On this page

Label

KLabel provides a wrapper around general label tags.

html
<KLabel>Input Title</KLabel>

Props

help

Use the help prop to display helper tooltip text.

html
<KLabel help="This is an example">Input Title</KLabel>
html
<KLabel help="This is a really long tooltip. Hopefully we won't have anything this long but we might. I wonder how it handles long inputs">
  Long Input Title
</KLabel>

info

Use the info prop to display information help text.

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

tooltipAttributes

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

html
<KLabel
  :tooltip-attributes="{ placement: 'right', 'max-width': '200' }"
  help="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.

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

Released under the Apache-2.0 License.