Kumo Svelte
kumo-svelte

Label

A label component for form fields with support for required/optional indicators and tooltips.

<script lang="ts">
  import { Label } from "kumo-svelte/components/label";
</script>

{#snippet tooltip()}
  More information about this field
{/snippet}

<div class="flex flex-col gap-4">
  <Label>Default Label</Label>
  <Label showOptional>Optional Label</Label>
  <Label {tooltip}>Label with Tooltip</Label>
</div>

Import

import { Label } from "kumo-svelte/components/label";

Usage

Label features are automatically available through form components like Input, Select, Checkbox, and Switch via the required and labelTooltip props.

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

{#snippet labelTooltip()}
  Find this in your dashboard settings
{/snippet}

<Input label="Phone" required={false} placeholder="+1 555-0000" />
<Input label="API Key" {labelTooltip} />

Standalone Label

For custom form layouts, use the Label component directly.

<script lang="ts">
  import { Label } from "kumo-svelte/components/label";
</script>

{#snippet tooltip()}
  This field is mandatory
{/snippet}

<Label {tooltip}>Username</Label>

Examples

Optional Field

Shows gray optional text when required={false} on form components.

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

<Input label="Phone Number" required={false} placeholder="+1 555-0000" />

With Tooltip

Shows an info icon with a tooltip for additional context. In Svelte, pass tooltip content as a snippet.

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
</script>

{#snippet labelTooltip()}
  Find this in your dashboard settings under API > Keys
{/snippet}

<Input label="API Key" {labelTooltip} placeholder="sk_live_..." />

Snippet Label Content

Labels support snippet content for rich formatting.

<script lang="ts">
  import * as Checkbox from "kumo-svelte/components/checkbox";
</script>

{#snippet label()}
  <span>I agree to the <strong>Terms of Service</strong></span>
{/snippet}

<Checkbox.Root {label} />

Form with Mixed Fields

Real-world example showing required and optional fields together.

<script lang="ts">
  import { Input } from "kumo-svelte/components/input";
  import * as Select from "kumo-svelte/components/select";
  const countries = {
    us: "United States",
    uk: "United Kingdom",
    ca: "Canada",
  };
</script>

{#snippet emailTooltip()}
  We'll send your receipt here
{/snippet}

<div class="flex max-w-md flex-col gap-4">
  <Input label="Full Name" placeholder="John Doe" />
  <Input label="Email" labelTooltip={emailTooltip} placeholder="john@example.com" type="email" />
  <Input label="Company" required={false} placeholder="Acme Inc." />
  <Select.Root label="Country" placeholder="Select a country" items={countries} />
</div>

Standalone Label

Use Label directly for custom layouts or non-form contexts.

<script lang="ts">
  import { Label } from "kumo-svelte/components/label";
</script>

{#snippet tooltip()}
  Important field
{/snippet}

<div class="flex flex-col gap-3">
  <Label>Default</Label>
  <Label showOptional>Optional</Label>
  <Label {tooltip}>With Tooltip</Label>
</div>

API Reference

Label

PropTypeDefault
children*Snippet—
showOptionalbooleanfalse
tooltipSnippet—
classstring—
forstring—
idstring—
asContentbooleanfalse

Design Guidelines

When to Use Optional Indicators

  • Use optional indicators for optional fields when most fields are required.
  • Be consistent within a form.
  • Default fields with no indicator are assumed required by users.

When to Use Tooltips

  • Provide additional context that does not fit in the label.
  • Explain format requirements or validation rules.
  • Link to help documentation for complex fields.
  • Keep tooltip content concise: one or two sentences.

Accessibility

  • Optional indicators are visual. Use required for validation when the field is required.
  • Tooltips are accessible from the info icon.
  • Associate standalone labels with controls using the for prop.