Label

A caption naming or describing a form element.

Code

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

<Label vertical="undefined">sterling-svelte</Label>

Members

Property Name	Type	Default	Comment
forwardClick	string	false	If true, clicking the label invokes a click on the content. Typically used when for/id pairs are not present.
message	string \| Snippet	''	The status message to display.
required	string	false	When true, the label will indicate a value is required.
requiredIndicator	string \| Snippet	''	The indicator to display when required. Defaults to '*'
requiredReason	string \| Snippet	''	The reason a value is required.
text	string \| Snippet	''	The text to display in the label.

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, events, and methods.

Anatomy

<label class="sterling-label">
  <div class="text">
    {@render text()}
  </div>
  <div class="content">
    {@render children()}
  </div>
  <div class="message">
    {@render message()}
  </div>
  <Tooltip>
    <div class="required">
      {@render requiredIndicator()}
    </div>
    {#snippet tip()}
      {@render requiredReason()}
    {/snippet}
  </ToolTip>
</label>