Label

A form label that pairs with Input, Select and the other controls, with a required marker.

Sprout name

<div className="flex flex-col gap-1.5">
  <Label htmlFor="sprout">Sprout name</Label>
  <Input id="sprout" defaultValue="robin" />
</div>

Installation

npx shadcn@latest add https://sproutboat.com/ikada/r/label.json

The CLI writes components/ikada/label.tsx and merges the ikada theme into your CSS. Or take it from the package: import { Label } from "@sproutboat/ikada";

Usage

import { Label } from "@/components/ikada/label";

<div className="flex flex-col gap-1.5">
  <Label htmlFor="sprout">Sprout name</Label>
  <Input id="sprout" defaultValue="robin" />
</div>

Examples

Label

Pair it with a control through htmlFor and id. Inside a Field this is wired for you.

Sprout name

<div className="flex flex-col gap-1.5">
  <Label htmlFor="sprout">Sprout name</Label>
  <Input id="sprout" defaultValue="robin" />
</div>

Required

The asterisk is for sighted users; the control still needs required itself.

Domain

<div className="flex flex-col gap-1.5">
  <Label htmlFor="domain" required>
    Domain
  </Label>
  <Input id="domain" required placeholder="robin.sproutboat.app" />
</div>

Props

LabelProps
Prop	Type	Description
required	`boolean`	Shows a required marker. The control still needs `required` itself.

Also takes every prop of ComponentProps<"label">.

Source: src/components/label.tsx