Label

Ported

A form label outside a Field. Link it to its control with htmlFor. Native <label> attributes and ref pass through.

Kumo source

Owner (optional)

import type { CSSProperties } from "react";
import { Input } from "@etched/monet/input";
import { Label } from "@etched/monet/label";

// A label above its control, spaced like Field.
const stack: CSSProperties = { display: "grid", gap: "var(--et-space-2)" };

export function Preview() {
  return (
    <div style={stack}>
      <Label htmlFor="label-preview-owner" showOptional>
        Owner
      </Label>
      <Input id="label-preview-owner" placeholder="Name or email" />
    </div>
  );
}

Installation

import { Label } from "@etched/monet/label";

Examples

Standalone

Default labelOptional label (optional)Custom marker(if any)

import { Label } from "@etched/monet/label";

export function Standalone() {
  return (
    <div className="row">
      <Label>Default label</Label>
      <Label showOptional>Optional label</Label>
      <Label showOptional optionalLabel="(if any)">
        Custom marker
      </Label>
    </div>
  );
}

Info button

tooltip puts an info button after the label. Its text shows on hover and focus, and screen readers hear it as the button's description.

Requisition ID

import type { CSSProperties } from "react";
import { Input } from "@etched/monet/input";
import { Label } from "@etched/monet/label";

// A label above its control, spaced like Field.
const stack: CSSProperties = { display: "grid", gap: "var(--et-space-2)" };

export function InfoButton() {
  return (
    <div style={stack}>
      <Label htmlFor="label-req" tooltip="From Greenhouse: Jobs, then the job's ID under its title.">
        Requisition ID
      </Label>
      <Input id="label-req" placeholder="REQ-0000" />
    </div>
  );
}

Linked to a control

Link the label with htmlFor: a click on it focuses the control.

Display name

Handover notes (optional)

import type { CSSProperties } from "react";
import { Input, InputArea } from "@etched/monet/input";
import { Label } from "@etched/monet/label";

// A label above its control, spaced like Field.
const stack: CSSProperties = { display: "grid", gap: "var(--et-space-2)" };

export function LinkedToAControl() {
  return (
    <div className="grid">
      <div style={stack}>
        <Label htmlFor="label-display-name">Display name</Label>
        <Input id="label-display-name" defaultValue="Ana Ruiz" />
      </div>
      <div style={stack}>
        <Label htmlFor="label-notes" showOptional>
          Handover notes
        </Label>
        <InputArea id="label-notes" rows={2} placeholder="Anything the next shift should know" />
      </div>
    </div>
  );
}

Accessibility

A native label. Linked with htmlFor, it names its control, and a click on it focuses the control.
With showOptional, the marker is in the label, so the control's name ends with "(optional)".
With tooltip, an info button named "More information" sits beside the label, not in it. The tip is its description and shows on focus.
Link it with htmlFor to the control's id. In a Field, or on a control with label, use that label in place of this one.

API reference

Prop	Type	Default	Description
children *	ReactNode	–
showOptional	boolean	–	Shows the optional marker after the label.
optionalLabel	ReactNode	"(optional)"	The marker's text.
tooltip	ReactNode	–	More about the field, behind an info button after the label. Shown on hover and focus; screen readers hear it as the button's description. The label and the button then sit in a `<span>`.