Label

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/reticle/input";
import { Label } from "@etched/reticle/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/reticle/label";

Examples

Standalone

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

import { Label } from "@etched/reticle/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>
  );
}

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/reticle/input";
import { Label } from "@etched/reticle/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>
  );
}

API reference

Prop	Type	Default	Description
children *	ReactNode	–
showOptional	boolean	–	Shows the optional marker after the label.
optionalLabel	ReactNode	"(optional)"	The marker's text.