Label

A caption for a form control, associated with its field either through the native for/id relationship (set htmlFor to the field's id) or by wrapping the control as a child.

View code

<form mix={[vstack({ gap: 5, align: "stretch" })]}>
	<div mix={[vstack({ gap: 2, align: "stretch" })]}>
		<Label htmlFor="display-name">Display name</Label>
		<Input
			id="display-name"
			name="displayName"
			defaultValue="Sergio"
			required
			aria-describedby="display-name-hint"
		/>
		<Description id="display-name-hint">Shown on every comment you leave.</Description>
	</div>

	<div mix={[vstack({ gap: 2, align: "stretch" })]}>
		<Label htmlFor="company" mix={[hstack({ gap: 2, justify: "between" })]}>
			Company
			<span mix={[text("xs"), fg("neutral.muted")]}>Optional</span>
		</Label>
		<Input id="company" name="company" placeholder="Where you work" />
	</div>

	<Label mix={[hstack({ gap: 2, align: "center" })]}>
		<input type="checkbox" name="digest" defaultChecked />
		Send me the weekly digest
	</Label>
</form>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Label } from "@sdxc/ui";

Renders its children inside a native <label> element, sized and colored as a form field caption. Pair it with a field by setting htmlFor to the field's id, or wrap the field directly so the platform associates them.

Examples

<Label>
	{t("form.newsletter.label")}
	<input type="checkbox" name="newsletter" />
</Label>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"label">.