Label
kumo-svelte

Label

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

Installation

Barrel

import { Label } from 'kumo-svelte';

Granular

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';</script><!-- Optional field with "(optional)" text --><Input label="Phone" required={false} placeholder="+1 555-0000" /><!-- With tooltip --><Input  label="API Key"  labelTooltip="Find this in your dashboard settings"/>

Standalone Label

For custom form layouts, use the `Label` component directly.

<script lang="ts">  import { Label } from 'kumo-svelte';</script><Label tooltip="This field is mandatory">Username</Label>

Examples

Optional Field

Shows gray "(optional)" text when required={false}.

With Tooltip

Shows an info icon with a tooltip for additional context.

Snippet Label Content

Labels support Snippet content for rich formatting.

Form with Mixed Fields

Real-world example showing required and optional fields together.

Standalone Label

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

API Reference

Label Props

Props for the standalone Label component:

PropTypeDefaultDescription
childrenSnippet-Label content (required)
showOptionalbooleanfalseShows gray "(optional)" text (only when required is false)
tooltipstring | Snippet-Tooltip content shown via info icon
classstring-Additional CSS classes

Form Component Label Props

These props are available on Input, InputArea, Select, Checkbox, Switch, SensitiveInput, and Combobox:

PropTypeDefaultDescription
labelstring | Snippet-Label content (enables Field wrapper)
requiredboolean-When false: shows "(optional)" text. Also sets HTML required attribute.
labelTooltipstring | Snippet-Tooltip content shown via info icon next to label

Design Guidelines

When to Use Optional Indicators

  • Use "(optional)" 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 doesn't fit in the label
  • Explain format requirements or validation rules
  • Link to help documentation for complex fields
  • Keep tooltip content concise, usually 1-2 sentences

Accessibility

  • Optional indicators are purely visual; use the required attribute for validation
  • Tooltips are accessible via keyboard focus on the info icon
  • Screen readers announce tooltip content when focused