Label

Renders an accessible label associated with controls.

<script lang="ts">
import { Input, Label } from "coss-svelte";
</script>

<div class="grid w-full max-w-sm gap-2">
	<Label for="label-email">Email address</Label>
	<Input id="label-email" type="email" placeholder="you@example.com" />
</div>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Label } from "coss-svelte";

Anatomy

Label exposes a single component export for the current implementation.

API Reference

Label

Renders an accessible label associated with controls.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI Label.Root.

Implementation Details

Status: Stable
Foundation: bits
Category: Forms & Validation
Particles: 0