Koala UI

Label

The one label and helper-text recipe behind every form control in Koala. Input, Field and OTP Input all compose Label and Hint, and inside a Field they auto-wire their own ids, htmlFor and aria.

We'll only use this to send receipts.

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Add this component (its dependencies come along)npx koalaui-cli@latest add label

Usage#

usage.tsxTSX
import { Label, Hint } from "@/components/ui/label"export function Example() {  return (    <div className="flex flex-col gap-1.5">      <Label htmlFor="name">Name</Label>      <input id="name" />      <Hint>As it appears on your ID.</Hint>    </div>  )}

Required#

Set required to append a destructive asterisk. It carries a visually-hidden (required) so screen readers announce it. The glyph itself is aria-hidden.

Hint & error#

Hint is the helper text below a control. The same element doubles as the error message: set hasError and it switches to the destructive tone (the color transitions, so it fades in rather than snaps).

Use 8 or more characters.

Password is too short.

Disabled#

disabled dims the label to match a disabled control. Inside a Field it's inferred from <Field disabled>.

Inside a Field#

Wrapped in a Field, the label and hint need no ids: the label adopts the control's htmlFor and required, and the hint registers itself so the control points aria-describedby at it. FieldLabel / FieldHint are these same two primitives, re-exported.

We'll send a confirmation here.

FAQ#

`Label` is the form label above a control; `Hint` is the helper text below it. They are the single recipe behind every Koala form control, so a field reads identically everywhere.