Forms

Label

Standalone label primitive that associates text with a custom control via for and matches the visual treatment of built-in inputs.

import { Label } from '@lostgradient/cinder/label';
formprimitive
01

Overview

Accessible form label that associates descriptive text with its input element.

Usage

svelte
<script lang="ts">
  import Label from '@lostgradient/cinder/label';
</script>

<Label for="my-input">Email address</Label>
02

When to use

Use when
  • Building a hand-rolled field that wraps multiple inputs needing one shared label.
  • Matching the disabled or required visual treatment of cinder inputs on a custom control.
Avoid when
  • Labelling a built-in input that already renders its own label prop — pass label instead.
03

Props

Props for label
Name
Type
Default
Description
for required text The id of the form control this label labels. Sets for on the rendered <label>.
required boolean false When true, append a visual indicator that the field is required.
disabled boolean false When true, render the label in the disabled color treatment.
children required snippet The label text or composed content.