Label

A native label that connects a visible name to a control.

Preview

Project name

Required

Use Label

Label is a named export of @flood-md/react. Connect the package once, then import what you use.

PackageProject UI

"use client";

import { FloodRoot, Label, Stack, Input } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Stack gap="2">
        <Label htmlFor="project-label">Project name</Label>
        <Input id="project-label" defaultValue="My project" />
      </Stack>
    </FloodRoot>
  );
}

Design notes

htmlFor connects the label to a matching control ID; implicit nested controls also retain native behavior.
required adds a decorative marker only. Set required on the actual control as well. Field already composes Label.

API reference

Prop	Values	Default
`required`	boolean	—
`Native HTML props`	LabelHTMLAttributes<HTMLLabelElement>	Forwarded

View TypeScript source

Page Markdown Agent skill