Label

A Label names a form control. It renders a <label> element with Classes.LABEL.

Prefer FormGroup

FormGroup renders the same label and adds helper text, intent and disabled styles. Use it to build forms.

Usage#

import { Label } from "@clawscale/react";

<Label>
  Dataset
  <input className={Classes.INPUT} />
</Label>

Examples#

Wrapping a control#

Put the control inside the label. A click anywhere on the label focuses it. Wrap secondary text in Classes.TEXT_MUTED.

DatasetRetention (days)

core/label/basic.tsx

import { Classes, HTMLSelect, Label } from "@clawscale/react";

export default function LabelBasic() {
  return (
    <div style={{ width: 280 }}>
      <Label>
        Dataset
        <input className={Classes.INPUT} placeholder="warehouse.orders_daily" />
      </Label>
      <Label>
        Retention <span className={Classes.TEXT_MUTED}>(days)</span>
        <HTMLSelect defaultValue={90} options={[7, 30, 90, 365]} />
      </Label>
    </div>
  );
}

Separate label#

When the label cannot wrap the control, set htmlFor to the control's id.

Owner

core/label/html-for.tsx

import { InputGroup, Label } from "@clawscale/react";

export default function LabelHtmlFor() {
  return (
    <div style={{ width: 280 }}>
      <Label htmlFor="label-owner">Owner</Label>
      <InputGroup id="label-owner" leftIcon="user" placeholder="data-platform@example.com" />
    </div>
  );
}

Inline#

Add Classes.INLINE to keep the text and the control on one line.

Region

Owner

core/label/inline.tsx

import { Classes, HTMLSelect, Label } from "@clawscale/react";

export default function LabelInline() {
  return (
    <>
      <Label className={Classes.INLINE}>
        Region
        <HTMLSelect options={["eu-west-1", "us-east-1", "ap-southeast-2"]} />
      </Label>
      <Label className={Classes.INLINE}>
        Owner
        <input className={Classes.INPUT} placeholder="data-platform" />
      </Label>
    </>
  );
}

Props interface#

Label has no props of its own. It accepts the HTML attributes of a <label>.