Downcity
Components

Label

Use for field titles, form naming, and accessible input labeling

Label

Label gives form controls clear names.

Import

import { Label } from "@downcity/ui";

Basic Example

import { Input, Label } from "@downcity/ui";

export function NameField() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="agent-name">Agent Name</Label>
      <Input id="agent-name" />
    </div>
  );
}

Usage Notes

  • Point htmlFor to the target control id
  • Use it inline with Checkbox
  • Keep Label focused on semantics, not complex layout

Input

Use for single-line text, search, and short configuration values

Popover

Use for lightweight panels, helper content, and contextual controls

Table of Contents

LabelImportBasic ExampleUsage Notes