Active development has been paused. Read the announcement.

Label

Renders an accessible label associated with controls.

<script lang="ts">
	import { Label } from 'radix-svelte';
	// These are internal icons, but they're not exported from the package.
	// Use your own icons instead.
</script>

<div>
	<fieldset class="flex w-full flex-col justify-start">
		<Label.Root class="mb-2.5 block text-sm leading-none text-white" for="firstName">
			Name
		</Label.Root>
		<input
			class="h-8 shrink-0 grow rounded border px-2.5
				leading-none text-vermilion-900 outline-none focus:ring-2 focus:ring-vermilion-800"
			id="firstName"
			value="Thomas G. Lopes"
			type="text"
		/>
	</fieldset>
</div>

API Reference

Root

Props
onMouseDown
function
N/A
ref
HTMLLabelElement
N/A
Inspired by Radix UI
Not affiliated with Radix UI or WorkOS.