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
formValidation	boolean	false	If true, then the message will be set using form validation on the child component. The required indicator will be displayed if the child component is required.
forwardClick	string	false	If true, clicking the label invokes a click on the content. Typically used when for/id pairs are not present.
onValidation	LabelValidationCallback \| undefined	undefined	Raised when form validation is checked. Provides control over the validation message and class.
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.

Types

	Type Name	Definition	Comment
	LabelValidationCallback	(validity: ValidityState,validationMessage: string) => LabelValidationResult \| undefined	The validity and validation message are provided by form validaiton on the child component.
	LabelValidationResult	{valid: boolean; validationClass?: string; validationMessage?: Snippet \| string;}	The validation class will be applied to the label. The validation message will be displayed as the message.

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>