Label

A <label>: a caption for another element

Code

<script lang="ts">
  import { Label } from '@geoffcox/sterling-svelte';
</script>

<Label>sterling-svelte</Label>

Members

Property Name	Type	Default	Comment
forwardClick	string	false	If true, clicking the label invokes a click on the content.
message	string	''	The status message to display.
required	string	false	When true, the label will indicate a value is required.
requiredReason	string	''	The reason a value is required.
status	string	''	The status of the label message.
text	string	''	The text to display in the label. Not used if the text slot is filled.
vertical	string	true	When true, the label appears above the content.
variant	string	''	Additional class names to apply

Types

	Type Name	Definition	Comment
	LabelStatus	'none' \| 'error' \| 'warning' \| 'info' \| 'success'	Used for the Label status property.

Considerations

An optional message and status can provide information to the user about their value.
The required property and requiredReason indicate the user must fill in a value and why.
Includes HTMLLabelElement props, event, and methods

Anatomy

<label class="sterling-label">
   <slot name="text" {disabled} {for} {forwardClick} {required} {text} {variant}>
    <div class="text">{text}</div>
    </slot>
  <div class="content">
    <slot />
  </div>
  <slot name="message" {disabled} {message} {required} {status} {variant}>
    <div class="message">{message}</div>
  </slot>
  <slot name="required" {requiredReason} {variant}>
    <Tooltip>
      <span class="required-reason" slot="tip">{requiredReason}</span>
      <div class="required">*</div>
    </Tooltip>
  </slot>
</label>