Label

TS

import { … } from "@fungi.computer/caps/components/label";

Hero

TSX

import { Label } from "@fungi.computer/caps/components/label";
import { Input } from "@fungi.computer/caps/components/input";

export default function Hero() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-col gap-1">
        <Label htmlFor="club" required>
          Club name
        </Label>
        <Input id="club" />
      </div>
      <div className="flex flex-col gap-1">
        <Label htmlFor="nickname" optional>
          Nickname
        </Label>
        <Input id="nickname" />
      </div>
    </div>
  );
}

With checkbox

TSX

import { Label } from "@fungi.computer/caps/components/label";
import { Checkbox } from "@fungi.computer/caps/components/checkbox";

export default function WithCheckbox() {
  return (
    <Label className="flex items-center gap-2 font-normal" htmlFor="terms">
      <Checkbox id="terms" />I agree to leave no trace
    </Label>
  );
}

Props

LabelProps

Prop	Type	Description
optional?	boolean	Adds a quiet "Optional" readout after the text.
required?	boolean

• optional?boolean

  Adds a quiet "Optional" readout after the text.

• required?boolean

Full types: API reference.