Label

A small uppercase caption in the secondary text color. Use it to name a reading, a group of values or a form control.

import { Label } from 'jarvis-react-ui';

Captions

Put a Label above or next to the value it names, such as a Metric. dim switches to the muted color for less important captions.

import { Label, Metric } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <div className="flex gap-8">
            <div className="flex flex-col gap-1">
                <Label>Core temp</Label>
                <Metric value="41.2" unit="°C" />
            </div>
            <div className="flex flex-col gap-1">
                <Label dim>Last sync</Label>
                <Metric value="00:42" unit="ago" small />
            </div>
        </div>
    );
}

Form controls

With htmlFor, the label renders as a native <label> bound to the control with that id. Clicking the label then focuses the field. Without htmlFor it renders a <span>.

import { Input, Label } from 'jarvis-react-ui';

export default function WithControl() {
    return (
        <div className="flex flex-col gap-2">
            <Label htmlFor="callsign">Callsign</Label>
            <Input id="callsign" placeholder="MK-XLII" />
        </div>
    );
}

Naming a group

Without htmlFor the label is a <span>. Native attributes such as id, title, aria-* and data-* are forwarded on both the <span> and the <label>, so give the label an id and point aria-labelledby of a group, region or custom widget at it.

import { Label, Metric, Pill } from 'jarvis-react-ui';

export default function LabelledBy() {
    return (
        <div role="group" aria-labelledby="reactor-label" className="flex flex-col gap-1">
            <Label id="reactor-label">Arc reactor</Label>
            <div className="flex items-center gap-3">
                <Metric value="98.6" unit="%" />
                <Pill variant="ok">Stable</Pill>
            </div>
        </div>
    );
}

Accessibility

With htmlFor it is a real <label>, so the text becomes the accessible name of the control.
Without htmlFor it is a <span> with no semantics of its own. Give it an id and reference it with aria-labelledby to make it the accessible name of another element.
The text is transformed to uppercase by CSS only. Write captions in normal case so screen readers do not spell them out letter by letter.

API

Prop	Type	Default	Description
`children` (required)	`ReactNode`		Caption text; rendered small and uppercase.
`className`	`string`		Additional class names for the root element (`<label>` or `<span>`).
`dim`	`boolean`	`false`	Uses the muted text color instead of the secondary one, for less important captions.
`htmlFor`	`string`		Id of a form control; when set, the label renders as a native `<label>` bound to it, otherwise as a `<span>`.

Also accepts inherited props from HTMLAttributes (54), AriaAttributes (53), DOMAttributes (169).