Installation

Barrel

import { Label } from 'kumo-svelte';

Granular

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

Usage

With Form Components (Recommended)

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}.

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

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

With Tooltip

Shows an info icon with a tooltip for additional context.

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

<Input
  label="API Key"
  labelTooltip="Find this in your dashboard settings under API > Keys"
  placeholder="sk_live_..."
/>

Snippet Label Content

Labels support Snippet content for rich formatting.

<script lang="ts">
  import { Checkbox } from 'kumo-svelte';
</script>

<Checkbox>
  I agree to the <strong>Terms of Service</strong>
</Checkbox>

Form with Mixed Fields

Real-world example showing required and optional fields together.

<script lang="ts">
  import { Input, Select } from 'kumo-svelte';

  const options = [
    { label: 'United States', value: 'us' },
    { label: 'United Kingdom', value: 'uk' },
    { label: 'Canada', value: 'ca' }
  ];
</script>

<div class="flex max-w-md flex-col gap-4">
  <Input label="Full Name" placeholder="John Doe" />
  <Input
    label="Email"
    labelTooltip="We'll send your receipt here"
    placeholder="john@example.com"
    type="email"
  />
  <Input label="Company" required={false} placeholder="Acme Inc." />
  <Select label="Country" placeholder="Select a country" {options} />
</div>

Standalone Label

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

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

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

API Reference

Label Props

Props for the standalone Label component:

Form Component Label Props

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

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